/* ============================================================
   tokens.css — SINGLE SOURCE OF TRUTH for the design system.
   Do NOT redefine colors, spacing, radius, shadows, easing, or
   z-index anywhere else. Import this file first on every page.
   See docs/DESIGN_SYSTEM.md for the philosophy & usage rules.
   ============================================================ */

:root {
    /* ---- Brand palette (fixed, theme-independent) ---- */
    --sky: #38bdf8;            /* primary accent: sky blue (dark) */
    --sky-bright: #7dd3fc;     /* hover / gradient stop */
    --sky-deep: #0ea5e9;       /* pressed / light-theme accent */
    --sky-glow: rgba(56, 189, 248, 0.35);

    /* ---- Dark theme (DEFAULT) ----
       Base: gray-dark with a subtle dark-purple tint. */
    --bg-base: #0e0f14;
    --bg-elevated: #16131f;        /* dark-purple tinted surface */
    --bg-sunken: #090a0e;
    --surface: rgba(255, 255, 255, 0.04);
    --surface-hover: rgba(255, 255, 255, 0.07);
    --surface-strong: rgba(255, 255, 255, 0.08);

    --text: #e8edf6;
    --text-muted: #9aa3b2;
    --text-faint: #5f6675;

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    --accent: var(--sky);
    --accent-hover: var(--sky-bright);
    --accent-contrast: #07111b;    /* text on accent fill */
    --accent-soft: rgba(56, 189, 248, 0.14);

    --strong-color: #d6f2ff;  /* bright cyan - strong text in dark theme */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
    --shadow-glow: 0 12px 40px var(--sky-glow);

    --orb-1: rgba(56, 189, 248, 0.18);   /* sky */
    --orb-2: rgba(125, 60, 152, 0.20);   /* dark purple */
    --orb-3: rgba(20, 20, 35, 0.0);

    /* ---- Light theme overrides ---- */
}

[data-theme="light"] {
    --bg-base: #f4f6fb;
    --bg-elevated: #ffffff;
    --bg-sunken: #eaeef6;
    --surface: rgba(20, 20, 40, 0.03);
    --surface-hover: rgba(20, 20, 40, 0.06);
    --surface-strong: rgba(20, 20, 40, 0.08);

    --text: #0f172a;
    --text-muted: #525c6e;
    --text-faint: #8a93a4;

    --border: rgba(15, 23, 42, 0.10);
    --border-strong: rgba(15, 23, 42, 0.18);

    --accent: var(--sky-deep);
    --accent-hover: var(--sky);
    --accent-contrast: #ffffff;
    --accent-soft: rgba(14, 165, 233, 0.12);

    --strong-color: #091d28;  /* dark blue - strong text in light theme */

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
    --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);
    --shadow-glow: 0 12px 40px rgba(14, 165, 233, 0.22);

    --orb-1: rgba(14, 165, 233, 0.16);
    --orb-2: rgba(124, 58, 237, 0.12);
}

:root {
    /* ---- Spacing scale (4px base) ---- */
    --space-1: 0.25rem;   /* 4 */
    --space-2: 0.5rem;    /* 8 */
    --space-3: 0.75rem;   /* 12 */
    --space-4: 1rem;      /* 16 */
    --space-5: 1.5rem;    /* 24 */
    --space-6: 2rem;      /* 32 */
    --space-7: 3rem;      /* 48 */
    --space-8: 4rem;      /* 64 */
    --space-9: 6rem;      /* 96 */

    /* ---- Radius ---- */
    --radius-xs: 0.375rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 999px;

    /* ---- Typography ---- */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.5rem;
    --text-4xl: 3.5rem;

    --leading-tight: 1.15;
    --leading-normal: 1.6;

    /* ---- Easing & motion ---- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 0.16s;
    --dur: 0.28s;
    --dur-slow: 0.5s;

    /* ---- Layout ---- */
    --container-max: 1200px;
    --nav-height: 68px;

    /* ---- Z-index scale ---- */
    --z-base: 1;
    --z-raised: 10;
    --z-sticky: 100;
    --z-nav: 1000;
    --z-dropdown: 1100;
    --z-modal: 1300;
    --z-overlay: 1200;
    --z-toast: 1400;

    /* ---- Legacy variable aliases ----
       Map old :root names (used by migrated chat styles) onto the
       new token system so the chat page inherits the new palette
       without rewriting 1700 lines of CSS. Do not use these in new
       code — use the tokens above. */
    --bg-primary: var(--bg-elevated);
    --bg-secondary: var(--bg-base);
    --accent-primary: var(--accent);
    --accent-secondary: var(--sky-bright);
    --text-primary: var(--text);
    --text-secondary: var(--text-muted);
    --primary-color: var(--accent);
    --primary-hover: var(--accent-hover);
    --bg-dark: var(--bg-base);
    --bg-card: var(--bg-elevated);
    --text-light: var(--text);
    --text-muted-legacy: var(--text-muted);
    --border-color: var(--border);
}