/**
 * Theme follows the browser/OS preference.
 * Light → light surfaces + dark text
 * Dark → dark surfaces + light text
 * No toggle UI.
 */

:root {
  color-scheme: light;
  --cs-page: #f4f7f9;
  --cs-surface: #ffffff;
  --cs-surface-2: #f8fafc;
  --cs-surface-3: #f1f5f9;
  --cs-border: #e2e8f0;
  --cs-border-soft: #f1f5f9;
  --cs-text: #334155;
  --cs-text-strong: #0f172a;
  --cs-text-muted: #64748b;
  --cs-text-faint: #94a3b8;
  --cs-input: #ffffff;
  --cs-overlay: rgba(2, 6, 23, 0.45);
  --cs-shadow: 0 14px 40px rgba(15, 23, 42, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --cs-page: #0b1220;
    --cs-surface: #111827;
    --cs-surface-2: #151e2e;
    --cs-surface-3: #1a2436;
    --cs-border: #243044;
    --cs-border-soft: #1e293b;
    --cs-text: #cbd5e1;
    --cs-text-strong: #f1f5f9;
    --cs-text-muted: #94a3b8;
    --cs-text-faint: #64748b;
    --cs-input: #0f172a;
    --cs-overlay: rgba(0, 0, 0, 0.55);
    --cs-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  }

  html,
  body {
    background-color: var(--cs-page) !important;
    color: var(--cs-text) !important;
  }

  /* Page / card surfaces */
  .bg-white,
  .bg-white\/95,
  .bg-white\/90,
  .bg-white\/85,
  .bg-white\/80,
  .bg-white\/70,
  .bg-\[\#f4f7f9\],
  .bg-slate-50,
  .bg-slate-100,
  .bg-gray-50,
  .bg-gray-100 {
    background-color: var(--cs-surface) !important;
  }

  .bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.06) !important;
  }

  .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  .border-white\/70,
  .border-white\/60,
  .border-white\/50,
  .border-slate-100\/80 {
    border-color: var(--cs-border) !important;
  }

  /* Dashboard / statistics / order custom page wash */
  .dash-page::before,
  .stats-page::before,
  .order-page::before {
    background:
      radial-gradient(900px 420px at 100% -8%, rgba(22, 173, 106, 0.12), transparent 55%),
      radial-gradient(700px 360px at 0% 18%, rgba(59, 130, 246, 0.08), transparent 50%),
      var(--cs-page) !important;
  }

  .border-white\/80 {
    border-color: var(--cs-border) !important;
  }

  .bg-academy-100\/60 {
    background-color: rgba(22, 173, 106, 0.12) !important;
  }

  .hover\:bg-slate-50\/60:hover {
    background-color: var(--cs-surface-3) !important;
  }

  .focus\:bg-white:focus {
    background-color: var(--cs-input) !important;
  }

  .bg-academy-100\/70,
  .bg-blue-100\/40,
  .bg-blue-100\/50,
  .bg-academy-500\/10,
  .bg-blue-500\/10 {
    background-color: transparent !important;
  }

  .bg-slate-50\/80,
  .bg-slate-50\/70,
  .bg-slate-50\/60,
  .hover\:bg-slate-50\/70:hover,
  .hover\:bg-slate-50\/80:hover,
  .hover\:bg-academy-50\/40:hover {
    background-color: var(--cs-surface-3) !important;
  }

  .bg-slate-200\/80 {
    background-color: rgba(148, 163, 184, 0.18) !important;
  }

  .bg-cyan-50 {
    background-color: rgba(6, 182, 212, 0.14) !important;
  }

  .bg-academy-50\/70 {
    background-color: rgba(22, 173, 106, 0.14) !important;
  }

  .focus\:ring-emerald-50:focus {
    --tw-ring-color: rgba(22, 173, 106, 0.22) !important;
  }

  .hover\:bg-slate-800:hover {
    background-color: #1e293b !important;
  }

  .text-cyan-600 {
    color: #22d3ee !important;
  }

  .from-slate-50 {
    --tw-gradient-from: #151e2e !important;
  }

  .to-white {
    --tw-gradient-to: #111827 !important;
  }

  .hover\:bg-white:hover,
  .hover\:bg-slate-50:hover,
  .hover\:bg-slate-100:hover,
  .hover\:bg-gray-50:hover {
    background-color: var(--cs-surface-3) !important;
  }

  /* Statistics tables */
  thead.bg-slate-50\/80,
  tr.hover\:bg-academy-50\/40:hover,
  tr.hover\:bg-slate-50\/80:hover {
    background-color: var(--cs-surface-2) !important;
  }

  .text-slate-800 {
    color: var(--cs-text-strong) !important;
  }

  /* Soft brand / status surfaces */
  .bg-academy-50,
  .bg-academy-100,
  .bg-emerald-50,
  .bg-green-50 {
    background-color: rgba(22, 173, 106, 0.14) !important;
  }

  .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.14) !important;
  }

  .bg-amber-50,
  .bg-yellow-50 {
    background-color: rgba(245, 158, 11, 0.14) !important;
  }

  .bg-red-50,
  .bg-rose-50 {
    background-color: rgba(239, 68, 68, 0.14) !important;
  }

  .bg-violet-50,
  .bg-purple-50 {
    background-color: rgba(139, 92, 246, 0.14) !important;
  }

  .bg-orange-50 {
    background-color: rgba(249, 115, 22, 0.14) !important;
  }

  .bg-pink-50 {
    background-color: rgba(236, 72, 153, 0.14) !important;
  }

  .from-academy-50 {
    --tw-gradient-from: rgba(22, 173, 106, 0.18) !important;
  }

  .to-slate-100,
  .to-emerald-100 {
    --tw-gradient-to: rgba(15, 23, 42, 0.9) !important;
  }

  /* Text */
  .text-slate-900,
  .text-gray-900,
  .text-black,
  .text-night {
    color: var(--cs-text-strong) !important;
  }

  .text-slate-800,
  .text-slate-700,
  .text-gray-800,
  .text-gray-700 {
    color: var(--cs-text) !important;
  }

  .text-slate-600,
  .text-slate-500,
  .text-gray-600,
  .text-gray-500 {
    color: var(--cs-text-muted) !important;
  }

  .text-slate-400,
  .text-gray-400 {
    color: #7c8aa0 !important;
  }

  .text-slate-300 {
    color: #94a3b8 !important;
  }

  .hover\:text-slate-900:hover,
  .hover\:text-slate-800:hover,
  .hover\:text-slate-700:hover {
    color: var(--cs-text-strong) !important;
  }

  .text-academy-700,
  .text-academy-600 {
    color: #4ade80 !important;
  }

  .text-emerald-700,
  .text-emerald-600 {
    color: #34d399 !important;
  }

  .text-blue-700,
  .text-blue-600 {
    color: #60a5fa !important;
  }

  .text-amber-700,
  .text-amber-600,
  .text-yellow-700 {
    color: #fbbf24 !important;
  }

  .text-red-700,
  .text-red-600 {
    color: #f87171 !important;
  }

  .text-violet-700,
  .text-violet-600,
  .text-purple-700 {
    color: #c4b5fd !important;
  }

  .text-orange-500,
  .text-orange-600 {
    color: #fb923c !important;
  }

  .text-pink-500 {
    color: #f472b6 !important;
  }

  /* Borders */
  .border-slate-50,
  .border-slate-100,
  .border-slate-200,
  .border-gray-100,
  .border-gray-200,
  .border-white\/10,
  .divide-slate-50 > :not([hidden]) ~ :not([hidden]),
  .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--cs-border) !important;
  }

  .border-dashed {
    border-color: var(--cs-border) !important;
  }

  .hover\:border-academy-200:hover,
  .hover\:border-academy-400:hover,
  .hover\:border-academy-500:hover {
    border-color: rgba(22, 173, 106, 0.45) !important;
  }

  /* Forms */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,
  select {
    background-color: var(--cs-input) !important;
    color: var(--cs-text-strong) !important;
    border-color: var(--cs-border) !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--cs-text-faint) !important;
  }

  option {
    background-color: var(--cs-surface);
    color: var(--cs-text-strong);
  }

  /* Shadows */
  .shadow-panel,
  .shadow-sm,
  .shadow,
  .shadow-md,
  .shadow-lg,
  .shadow-xl,
  .shadow-card,
  .shadow-2xl {
    box-shadow: var(--cs-shadow) !important;
  }

  /* Overlay / drawers */
  .bg-slate-950\/40,
  .bg-slate-950\/35,
  .bg-slate-950\/30 {
    background-color: var(--cs-overlay) !important;
  }

  /* Keep intentional dark brand blocks readable */
  .bg-night,
  .bg-\[\#0b1220\],
  .bg-\[\#101827\] {
    background-color: #0a101c !important;
    color: #e2e8f0;
  }

  .bg-night .text-slate-400,
  .bg-night .text-slate-300,
  .bg-\[\#0b1220\] .text-slate-400 {
    color: #94a3b8 !important;
  }

  .bg-night .text-white,
  .bg-night h1,
  .bg-night h2,
  .bg-night strong {
    color: #f8fafc !important;
  }

  /* Soft buttons / chips that used light gray */
  .bg-slate-100\/80,
  .bg-slate-50\/80,
  .bg-slate-50\/60 {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }

  /* Tables / code blocks */
  table,
  pre,
  code {
    color: var(--cs-text);
  }

  /* Article body on blog */
  .article-body p,
  .article-body li {
    color: var(--cs-text) !important;
  }

  .article-body h2,
  .article-body h3 {
    color: var(--cs-text-strong) !important;
  }

  .article-body blockquote {
    background: rgba(22, 173, 106, 0.12) !important;
    color: var(--cs-text) !important;
  }

  /* Cart / sticky headers */
  header.bg-white\/95,
  header.sticky,
  aside.bg-white,
  .backdrop-blur-xl,
  .backdrop-blur-lg {
    background-color: rgba(17, 24, 39, 0.92) !important;
  }

  /* Avoid invisible icons on dark soft badges */
  .text-slate-200,
  .text-slate-300 {
    color: #94a3b8 !important;
  }

  /* File inputs / dashed dropzones */
  .border-dashed.bg-slate-50,
  label .bg-slate-50 {
    background-color: var(--cs-surface-2) !important;
  }

  /* Solid brand buttons must keep light text */
  .bg-academy-500,
  .bg-academy-600,
  .bg-academy-700,
  .bg-emerald-500,
  .bg-blue-500,
  .bg-red-500,
  .bg-violet-500,
  .bg-amber-500,
  a.bg-academy-500,
  button.bg-academy-500 {
    color: #ffffff !important;
  }

  .bg-academy-500 *,
  .bg-academy-600 *,
  button.bg-academy-500 *,
  a.bg-academy-500 * {
    color: inherit !important;
  }

  /* Active sidebar / selected pills with green fill */
  .bg-academy-50 {
    color: #86efac;
  }

  .bg-academy-50.text-academy-700,
  .text-academy-700.bg-academy-50,
  a.bg-academy-50 {
    color: #86efac !important;
  }

  /* Order detail page — win over earlier surface remaps */
  .order-page .order-hero,
  .order-page .order-card {
    background-color: #111827 !important;
    border-color: #243044 !important;
  }

  .order-page .order-soft {
    background-color: #151e2e !important;
    border-color: #243044 !important;
  }

  .order-page .order-blob {
    background-color: rgba(22, 173, 106, 0.18) !important;
  }

  .order-page .order-receipt-preview {
    background: linear-gradient(#151e2e, #111827) !important;
    border-color: #243044 !important;
  }

  .order-page .order-receipt-frame {
    background-color: #0f172a !important;
    border-color: #243044 !important;
  }

  .order-page select {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #243044 !important;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
  }

  body {
    color: #334155;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,
  select {
    background-color: #ffffff;
    color: #0f172a;
  }

  input::placeholder,
  textarea::placeholder {
    color: #94a3b8;
  }

  /* Keep white text only on dark/brand fills in light mode */
  .bg-white .text-white:not(button):not(.bg-academy-500):not([class*="bg-academy-"]):not([class*="bg-night"]) {
    color: #0f172a;
  }
}

html {
  color-scheme: light dark;
}