@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Figtree:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* ============================================================
   ZYORA — Design Tokens (v1)
   Every color, space, radius, shadow, and font lives here.
   Never hardcode values in components. Always use var(--…).
   ============================================================ */

:root {
  /* ---------- Neutral palette (grayscale, no hue) ---------- */
  --n-0:   #ffffff;
  --n-25:  #fafcfc;
  --n-50:  #F4F7F7;
  --n-100: #E9F0F0;
  --n-150: #E0EAEA;
  --n-200: #D6E2E2;
  --n-250: #BFD0D0;
  --n-300: #A9BDBE;
  --n-400: #7E9697;
  --n-500: #5F797C;
  --n-600: #3E5A5E;
  --n-700: #274347;
  --n-800: #123A3F;
  --n-900: #0B2A2F;
  --n-950: #071E22;
  --n-1000:#04151A;

  /* ---------- Surface (light theme default) ---------- */
  --bg:            var(--n-50);
  --surface:       var(--n-0);
  --surface-2:     var(--n-100);
  --surface-3:     var(--n-150);
  --border:        var(--n-200);
  --border-strong: var(--n-250);
  --overlay:       rgba(7, 30, 34, 0.46);

  /* ---------- Text ---------- */
  --text:        var(--n-900);
  --text-soft:   var(--n-600);
  --text-muted:  var(--n-400);
  --text-faint:  var(--n-300);
  --on-accent:   #ffffff;

  /* ---------- Accent (single dark accent) ---------- */
  --accent:        #0B756D;
  --accent-hover:  #095F59;
  --accent-soft:   rgba(11, 117, 109, 0.08);
  --focus-ring:    rgba(11, 117, 109, 0.22);

  /* ---------- ZYORA theme names (new) ---------- */
  --ink:#0B2A2F; --ink-2:#3E5A5E; --ink-3:#5F797C;
  --btn-bg:#0B756D; --btn-bg-h:#095F59; --btn-fg:#FFFFFF; --link:#0A6B64;
  --deep:#0A2F34; --deep-2:#0F4046; --deep-ink:#E7F5F3; --deep-ink-2:#A9CBC9; --deep-line:#1D5258;
  --sun:#F2A33A; --sun-soft:#FDF0DA; --sun-ink:#3B2400;

  /* ---------- Semantic ---------- */
  --success:   #12805C;
  --success-bg: #E3F5EE;
  --warning:   #A76505;
  --warning-bg:#FDF0DA;
  --danger:    #C62828;
  --danger-bg: #FDECEC;
  --info:      #0A6B64;
  --info-bg:   #E0F2F0;

  /* ---------- Pastel categories (for bot/order cards) ---------- */
  --peach-bg:   #fde8d8;  --peach-fg:   #b35c08;
  --lav-bg:     #e9e3ff;  --lav-fg:     #5a37b8;
  --cyan-bg:    #e0f2fe;  --cyan-fg:    #0b6f9c;
  --pink-bg:    #fce7f3;  --pink-fg:    #a81b5e;
  --mint-bg:    #e4f8ec;  --mint-fg:    #1c7a48;
  --sand-bg:    #fbf0d6;  --sand-fg:    #8a6308;

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl:24px;
  --r-pill: 9999px;

  /* ---------- Spacing (4px base) ---------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* ---------- Typography ---------- */
  --font: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 30px;
  --fs-4xl: 38px;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ---------- Shadows ---------- */
  --sh-xs: 0 1px 2px rgba(10, 47, 52, 0.04);
  --sh-sm: 0 2px 6px rgba(10, 47, 52, 0.05), 0 1px 2px rgba(10, 47, 52, 0.04);
  --sh-md: 0 6px 18px rgba(10, 47, 52, 0.06), 0 2px 6px rgba(10, 47, 52, 0.04);
  --sh-lg: 0 14px 34px rgba(10, 47, 52, 0.08), 0 4px 10px rgba(10, 47, 52, 0.04);
  --sh-xl: 0 24px 60px rgba(10, 47, 52, 0.10), 0 8px 20px rgba(10, 47, 52, 0.05);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- Layout ---------- */
  --content-max: 880px;
  --topbar-h: 58px;
  --bottombar-h: 62px;
  --sidebar-w: 260px;

  /* ---------- Z-index scale ---------- */
  --z-base: 1;
  --z-sticky: 40;
  --z-drawer: 60;
  --z-nav: 80;
  --z-popover: 120;
  --z-modal: 200;
  --z-toast: 300;
}

/* ============================================================
   Dark theme — same structure, inverted surfaces
   ============================================================ */
html[data-theme="dark"] {
  --bg:            #07191C;
  --surface:       #0C2428;
  --surface-2:     #10302F;
  --surface-3:     #163B3C;
  --border:        #1B3D40;
  --border-strong: #285055;
  --overlay:       rgba(0, 0, 0, 0.6);

  --text:       #E9F4F3;
  --text-soft:  #A9C4C4;
  --text-muted: #86A3A4;
  --text-faint: #4F6B6D;
  --on-accent:  #04252A;

  --accent:       #2DD4BF;
  --accent-hover: #5EEAD4;
  --accent-soft:  rgba(45, 212, 191, 0.12);
  --focus-ring:   rgba(45, 212, 191, 0.28);

  --success:    #4ADE9E;  --success-bg: rgba(74, 222, 158, 0.12);
  --warning:    #fbbf24;  --warning-bg: rgba(251, 191, 36, 0.12);
  --danger:     #f87171;  --danger-bg:  rgba(248, 113, 113, 0.12);
  --info:       #5EEAD4;  --info-bg:    rgba(94, 234, 212, 0.10);

  --peach-bg: rgba(253, 232, 216, 0.13);  --peach-fg: #f8c39b;
  --lav-bg:   rgba(233, 227, 255, 0.13);  --lav-fg:   #c4b6ff;
  --cyan-bg:  rgba(224, 242, 254, 0.13);  --cyan-fg:  #8ac8ea;
  --pink-bg:  rgba(252, 231, 243, 0.13);  --pink-fg:  #f3a8c8;
  --mint-bg:  rgba(228, 248, 236, 0.13);  --mint-fg:  #8fd5ab;
  --sand-bg:  rgba(251, 240, 214, 0.13);  --sand-fg:  #e5c77b;

  --ink:#E9F4F3; --ink-2:#A9C4C4; --ink-3:#86A3A4;
  --btn-bg:#2DD4BF; --btn-bg-h:#5EEAD4; --btn-fg:#04252A; --link:#5EEAD4;
  --deep:#0E3A40; --deep-2:#14505A; --deep-line:#256A72;
  --sun-soft:#3A2B10; --sun-ink:#FBD99A;

  --sh-xs: 0 1px 2px rgba(0,0,0,0.5);
  --sh-sm: 0 2px 6px rgba(0,0,0,0.5);
  --sh-md: 0 6px 18px rgba(0,0,0,0.5);
  --sh-lg: 0 14px 34px rgba(0,0,0,0.55);
  --sh-xl: 0 24px 60px rgba(0,0,0,0.6);
}