/* ==========================================================================
   Stochumberg — design tokens
   A shadcn/ui token layer (zinc base). This file is the single source of
   colour, radius, shadow and type for the whole product: landing, chat,
   legal, updates and admin.

   Dark is the default (:root). `body.light-mode` flips to light — that is the
   switch the app already toggles, so no JS change is needed.

   The `LEGACY ALIASES` block at the bottom re-points the older --bg-* /
   --text-* / --br-* variable names at these tokens, so every existing rule in
   style.css and brand.css inherits the new look without being rewritten.
   ========================================================================== */

:root {
    /* ---- Surfaces ------------------------------------------------------ */
    --background: #09090b;
    --foreground: #fafafa;

    /* Raised surfaces: cards, popovers, dropdowns, sidebar */
    --card: #18181b;
    --card-foreground: #fafafa;
    --popover: #18181b;
    --popover-foreground: #fafafa;
    --sidebar: #18181b;

    /* ---- Intent -------------------------------------------------------- */
    /* shadcn's primary is the high-contrast neutral, not a hue. */
    --primary: #fafafa;
    --primary-foreground: #18181b;

    --secondary: #27272a;
    --secondary-foreground: #fafafa;

    --muted: #27272a;
    --muted-foreground: #a1a1aa;

    --accent: #27272a;
    --accent-foreground: #fafafa;

    --destructive: #ef4444;
    --destructive-foreground: #fafafa;
    --success: #22c55e;
    --success-foreground: #052e16;
    --warning: #f59e0b;
    --warning-foreground: #451a03;

    /* ---- Lines & focus ------------------------------------------------- */
    --border: #27272a;
    --border-muted: #1f1f22;
    --input: #27272a;
    --ring: #d4d4d8;

    /* ---- Charts / categorical ------------------------------------------
       Used for provider + model tags. shadcn's chart ramp, so the one place
       we still need hue stays inside the system. */
    --chart-1: #2662d9;
    --chart-2: #2eb88a;
    --chart-3: #e88c30;
    --chart-4: #af57db;
    --chart-5: #e23670;
    --chart-6: #26a8d1;   /* sixth model; shadcn ships five */

    /* ---- Radius --------------------------------------------------------- */
    --radius: 0.5rem;
    --radius-sm: calc(var(--radius) - 4px);   /*  4px */
    --radius-md: calc(var(--radius) - 2px);   /*  6px */
    --radius-lg: var(--radius);               /*  8px */
    --radius-xl: calc(var(--radius) + 4px);   /* 12px */
    --radius-2xl: calc(var(--radius) + 8px);  /* 16px */

    /* ---- Elevation ------------------------------------------------------
       Deliberately faint. In this system borders carry the structure and
       shadows only lift things that genuinely float. */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.16);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.22), 0 1px 2px -1px rgb(0 0 0 / 0.22);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.28), 0 2px 4px -2px rgb(0 0 0 / 0.28);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.34), 0 4px 6px -4px rgb(0 0 0 / 0.34);

    /* ---- Type ----------------------------------------------------------- */
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system,
                 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    /* Brand exception: the wordmark keeps its original face. Everything else
       — headings, UI, body — stays on --font-sans. */
    --font-brand: 'Syne', var(--font-sans);
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                 Consolas, monospace;
    /* Long-form reading only (zen room, artifact prose) — not brand chrome. */
    --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

    /* ---- Brand mark -----------------------------------------------------
       The one gradient left in the system. It is the logo, not decoration,
       so it is identical in light and dark and never used as a surface. */
    --brand-mark: linear-gradient(160deg, #8fa8ff 0%, #a97af6 45%, #6f4fd8 100%);

    /* ---- Motion ---------------------------------------------------------- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration: 150ms;
}

body.light-mode {
    --background: #ffffff;
    --foreground: #09090b;

    --card: #ffffff;
    --card-foreground: #09090b;
    --popover: #ffffff;
    --popover-foreground: #09090b;
    --sidebar: #fafafa;

    --primary: #18181b;
    --primary-foreground: #fafafa;

    --secondary: #f4f4f5;
    --secondary-foreground: #18181b;

    --muted: #f4f4f5;
    --muted-foreground: #71717a;

    --accent: #f4f4f5;
    --accent-foreground: #18181b;

    --destructive: #dc2626;
    --destructive-foreground: #fafafa;
    --success: #16a34a;
    --success-foreground: #f0fdf4;
    --warning: #d97706;
    --warning-foreground: #fffbeb;

    --border: #e4e4e7;
    --border-muted: #f4f4f5;
    --input: #e4e4e7;
    --ring: #09090b;

    --chart-1: #2563eb;
    --chart-2: #16a34a;
    --chart-3: #ea580c;
    --chart-4: #9333ea;
    --chart-5: #db2777;
    --chart-6: #0891b2;

    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* ==========================================================================
   LEGACY ALIASES
   Older variable names kept alive and pointed at the tokens above. Nothing
   new should use these — they exist so the 300+ existing var() call sites in
   style.css and brand.css pick up the redesign for free.
   ========================================================================== */

:root,
body.light-mode {
    /* style.css */
    --bg-primary: var(--background);
    --bg-secondary: var(--sidebar);
    --bg-tertiary: var(--muted);
    --bg-card: var(--card);

    --text-primary: var(--foreground);
    --text-secondary: var(--muted-foreground);
    --text-muted: var(--muted-foreground);

    --border-color: var(--border);
    --border-subtle: var(--border-muted);

    /* The old two-hue accent pair collapses onto the neutral primary. */
    --accent-blue: var(--primary);
    --accent-coral: var(--primary);
    --btn-text-on-accent: var(--primary-foreground);

    /* User bubble: a filled secondary surface, outlined — not a blue tint. */
    --bubble-user: var(--secondary);
    --bubble-user-border: var(--border);

    --color-danger: var(--destructive);
    --color-success: var(--success);
    --color-warning: var(--warning);

    /* Provider tags — tinted background + chart-hued label. */
    --tag-speed: color-mix(in srgb, var(--chart-2) 14%, transparent);
    --tag-speed-text: var(--chart-2);
    --tag-heavy: color-mix(in srgb, var(--chart-4) 14%, transparent);
    --tag-heavy-text: var(--chart-4);
    --tag-groq: color-mix(in srgb, var(--chart-3) 14%, transparent);
    --tag-groq-text: var(--chart-3);
    --tag-openrouter: color-mix(in srgb, var(--chart-1) 16%, transparent);
    --tag-openrouter-text: var(--chart-1);

    /* brand.css */
    --br-bg: var(--background);
    --br-bg-1: var(--card);
    --br-bg-2: var(--secondary);
    --br-plate: var(--card);

    --br-surface: var(--card);
    --br-surface-2: var(--secondary);
    --br-border: var(--border);
    --br-border-strong: var(--border);

    --br-text: var(--foreground);
    --br-sub: var(--muted-foreground);
    --br-muted: var(--muted-foreground);

    --br-violet: var(--chart-4);
    --br-blue: var(--chart-1);
    --br-green: var(--chart-2);
    --br-amber: var(--chart-3);
    --br-pink: var(--chart-5);
    --br-red: var(--destructive);
    --br-orange: var(--chart-3);

    --br-display: var(--font-sans);
    --br-body: var(--font-sans);
    --br-mono: var(--font-mono);

    --br-ease: var(--ease);
    --br-r-sm: var(--radius-md);
    --br-r-md: var(--radius-lg);
    --br-r-lg: var(--radius-xl);
}