/* ================================================================= */
/* Design Tokens — shared/frontend/css/tokens.css                     */
/* ================================================================= */
/* Import this file FIRST in every app. It provides the design system */
/* variables that all other shared stylesheets reference.              */
/*                                                                    */
/*   <link rel="stylesheet" href="/shared/css/tokens.css">            */
/* ================================================================= */

:root {
  /* ── Colour palette (indigo accent) ───────────────────────────── */
  --color-bg:           #fafafa;
  --color-bg-2:         #f0f0f3;
  --color-bg-3:         #e8e8ed;
  --color-fg:           #1a1a2e;
  --color-fg-2:         #6c6c80;
  --color-fg-3:         #9d9db0;
  --color-accent:       #4f46e5;
  --color-accent-light: #818cf8;
  --color-accent-bg:    rgba(79, 70, 229, 0.08);
  --color-accent-bg-2:  rgba(79, 70, 229, 0.15);
  --color-green:        #22c55e;
  --color-red:          #ef4444;
  --color-orange:       #f59e0b;
  --color-blue:         #3b82f6;
  --color-white:        #ffffff;

  /* ── Dark-mode overrides (applied via [data-theme="dark"]) ────── */
  /* See theme.js for toggle logic                                    */

  /* ── Typography ───────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code',
               'Consolas', monospace;

  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    18px;
  --text-xl:    22px;
  --text-2xl:   28px;
  --text-3xl:   36px;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-black:    800;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ── Spacing ──────────────────────────────────────────────────── */
  --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;

  /* ── Border radius ────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius:      12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 20px 60px rgba(0, 0, 0, 0.12);

  /* ── Transitions ──────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;
  --transition: all var(--duration-normal) var(--ease-out);

  /* ── Z-index layers ───────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    1100;

  /* ── Glass-morphism ───────────────────────────────────────────── */
  --glass-bg:      rgba(255, 255, 255, 0.82);
  --glass-bg-heavy: rgba(255, 255, 255, 0.92);
  --glass-blur:    blur(20px) saturate(1.4);

  /* ── Safe area insets (mobile) ────────────────────────────────── */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ── Dark theme tokens ──────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg:           #0f0f1a;
  --color-bg-2:         #1a1a2e;
  --color-bg-3:         #2a2a40;
  --color-fg:           #e8e8f0;
  --color-fg-2:         #a0a0b8;
  --color-fg-3:         #6c6c80;
  --color-accent:       #818cf8;
  --color-accent-light: #a5b4fc;
  --color-accent-bg:    rgba(129, 140, 248, 0.12);
  --color-accent-bg-2:  rgba(129, 140, 248, 0.20);
  --color-white:        #1a1a2e;

  --glass-bg:       rgba(15, 15, 26, 0.85);
  --glass-bg-heavy: rgba(15, 15, 26, 0.95);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.50);
}