/* Design tokens — extracted verbatim from the Tilly Platform Admin design. */

:root {
  /* ── Brand palette (nes.*) ────────────────────────── */
  --tilly-main:        #4F46E5;   /* Primary indigo (buttons, links, focus rings) */
  --tilly-main-2:      #4338CA;   /* Hover / pressed indigo */
  --tilly-light-main:  #6366F1;   /* Secondary indigo for gradients */
  --tilly-violet:      #8B5CF6;   /* Tilly gradient terminus, Eco accent */
  --tilly-dark:        #0F172A;   /* Sidebar, app shell */
  --tilly-bg-deep:     #0a0e1a;   /* Login / register body */
  --tilly-light:       #E2E8F0;   /* Light text on dark surfaces */

  /* ── Semantic palette ─────────────────────────────── */
  --tilly-success:     #10B981;   /* emerald-500 — Tilly online dot, success */
  --tilly-success-2:   #059669;   /* emerald-600 — hover */
  --tilly-warning:     #F59E0B;   /* amber-500 — Rocky accent */
  --tilly-warning-2:   #FBBF24;   /* amber-400 — warning text */
  --tilly-error:       #EF3C39;   /* nes-error */
  --tilly-error-2:     #DC2626;   /* red-600 — buttons */
  --tilly-info:        #3B82F6;   /* blue-500 */
  --tilly-info-2:      #2563EB;   /* blue-600 */

  /* ── Character accents ────────────────────────────── */
  --tilly-tilly:       #4F46E5;   /* 🦊 Tilly — Brand */
  --tilly-rocky:       #F59E0B;   /* 🦦 Rocky — Reports / audit */
  --tilly-hooper:      #0EA5E9;   /* 🦜 Hooper — Notifications / sync */
  --tilly-nutty:       #10B981;   /* 🐿️ Nutty — Inventory */
  --tilly-eco:         #8B5CF6;   /* 🤖 Eco — Backup / security */

  /* ── Neutrals (Tailwind gray scale, used heavily) ── */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --gray-950: #030712;

  /* ── Light-mode warm neutrals (from base.html overrides) ── */
  --light-bg:        #f5f5f0;
  --light-surface:   #ffffff;
  --light-surface-2: #f0f0eb;
  --light-border:    #e0e0db;
  --light-text:      #1a1a1a;
  --light-text-2:    #666666;
  --light-text-3:    #888888;

  /* ── Signature gradients ──────────────────────────── */
  --tilly-gradient:        linear-gradient(135deg, #6366F1, #8B5CF6);
  --tilly-button-gradient: linear-gradient(to right, #4F46E5, #6366F1);
  --tilly-hero-gradient:   linear-gradient(145deg, #0c1425 0%, #111c33 40%, #141e36 70%, #0f172a 100%);

  /* ── Semantic foreground / background tokens ──────── */
  --fg-1: #ffffff;   /* primary text on dark */
  --fg-2: #E2E8F0;   /* secondary text on dark */
  --fg-3: #94A3B8;   /* muted */
  --fg-4: #64748B;   /* most-muted */
  --bg-1: #030712;   /* app body */
  --bg-2: #0F172A;   /* sidebar / chrome */
  --bg-3: rgba(15, 23, 42, 0.5);  /* card on dark */
  --border-1: rgba(31, 41, 55, 1);
  --border-2: rgba(255, 255, 255, 0.08);

  /* ── Type stacks ──────────────────────────────────── */
  --font-sans:   'Plus Jakarta Sans', 'Alexandria', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic: 'Alexandria', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* ── Type scale (semantic) ────────────────────────── */
  --text-hero:    clamp(2rem, 4vw, 3rem);   /* 48px — login hero */
  --text-h1:      1.875rem;  /* 30px — page hero */
  --text-h2:      1.5rem;    /* 24px — page title */
  --text-h3:      1.125rem;  /* 18px — section / card title */
  --text-h4:      1rem;      /* 16px */
  --text-body:    0.875rem;  /* 14px — body */
  --text-sm:      0.8125rem; /* 13px */
  --text-xs:      0.75rem;   /* 12px — helpers, badges */
  --text-2xs:     0.6875rem; /* 11px — micro labels (UPPERCASE) */

  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.5;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ── Radius / shadow / elevation ──────────────────── */
  --radius-sm: 6px;
  --radius:    8px;
  --radius-md: 12px;   /* small cards, payment chips */
  --radius-lg: 16px;   /* buttons, inputs, pills */
  --radius-xl: 20px;
  --radius-2xl: 24px;  /* cards, modals */
  --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow:    0 4px 15px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-tilly:    0 8px 24px rgba(99, 102, 241, 0.35);
  --shadow-tilly-hi: 0 8px 28px rgba(99, 102, 241, 0.40);
  --shadow-tilly-soft: 0 0 40px rgba(79, 70, 229, 0.08);

  /* ── Spacing rhythm (mirrors Tailwind 4px grid) ───── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Motion ───────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur:      200ms;
  --dur-slow: 300ms;
}

:root{
  --accent:#4F46E5; --accent-2:#6366F1; --violet:#8B5CF6; --accent-soft:rgba(99,102,241,.16);
  --ok:#10B981; --trial:#3B82F6; --warn:#F59E0B; --err:#EF3C39; --grey:#64748B; --hooper:#0EA5E9; --rocky:#F59E0B; --nutty:#10B981; --eco:#8B5CF6;
  --fs:'Plus Jakarta Sans','Alexandria',system-ui,sans-serif;
}

/* ── Themeable surface tokens (dark defaults) ──────────────────────────
   These wrap the few surfaces that were previously hard-coded so the whole
   shell can flip with [data-theme="light"] on <html>. --fg-on-accent stays
   constant (white) because the brand gradient is identical in both themes. */
:root {
  --fg-on-accent:        #ffffff;                 /* text/icons on the indigo gradient */
  --card-sheen:          rgba(255,255,255,.02);   /* subtle top sheen on cards */
  --topbar-bg:           rgba(10,14,26,.72);       /* sticky translucent topbar */
  --sidebar-grad-top:    #0c1322;                  /* sidebar gradient top stop */
  --thead-bg:            #0c1322;                  /* sticky table header */
  --row-hover:           rgba(99,102,241,.06);     /* table row hover */
  --glow-1:              rgba(99,102,241,0.10);    /* body ambient glow (indigo) */
  --glow-2:              rgba(139,92,246,0.07);    /* body ambient glow (violet) */
  --scrollbar-thumb:     rgba(148,163,184,.22);
  --scrollbar-thumb-hover: rgba(148,163,184,.38);
  color-scheme: dark;
}

/* ── Light theme ───────────────────────────────────────────────────────
   Remaps the semantic palette only; brand hues, gradients, radii, spacing,
   and type all stay identical. Activated by data-theme="light" on <html>
   (set early by an inline script in base.html to avoid a flash). */
[data-theme="light"] {
  color-scheme: light;

  /* Foreground ramp (dark text on light) */
  --fg-1: #16181d;   /* primary headings / values */
  --fg-2: #2f333b;   /* body text */
  --fg-3: #5b6472;   /* muted */
  --fg-4: #8a93a3;   /* most-muted / micro labels */

  /* Surfaces */
  --bg-1: #eef0f6;   /* app body (cool light to complement indigo) */
  --bg-2: #ffffff;   /* cards / sidebar / chrome */
  --bg-3: #f3f4f9;   /* buttons, chips, inset surfaces */
  --border-1: #e2e5ee;
  --border-2: rgba(15,23,42,0.08);

  --card-sheen:          rgba(15,23,42,.012);
  --topbar-bg:           rgba(255,255,255,.82);
  --sidebar-grad-top:    #ffffff;
  --thead-bg:            #f3f4f9;
  --row-hover:           rgba(99,102,241,.07);
  --glow-1:              rgba(99,102,241,0.07);
  --glow-2:              rgba(139,92,246,0.05);
  --scrollbar-thumb:     rgba(100,116,139,.30);
  --scrollbar-thumb-hover: rgba(100,116,139,.5);

  /* Softer, cooler elevation on light */
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
  --shadow:    0 4px 15px rgba(15,23,42,0.08);
  --shadow-md: 0 8px 24px rgba(15,23,42,0.10);
  --shadow-lg: 0 24px 50px -12px rgba(15,23,42,0.22);
  --shadow-tilly:    0 8px 20px rgba(99,102,241,0.28);
  --shadow-tilly-hi: 0 8px 24px rgba(99,102,241,0.34);
}