/*
 * victorina-tokens.css — design tokens copied from victorina/src/styles/theme.css.
 * Read-only source. To update: edit the local copy, do NOT modify victorina.
 *
 * Cascade order in <head>: this file MUST come BEFORE modern-theme.css.
 *   <link rel="stylesheet" href="/css/victorina-tokens.css">
 *   <link rel="stylesheet" href="/css/modern-theme.css">
 *
 * Aliases at the bottom keep legacy glm-quiz variable names alive so that
 * the existing inline `var(--*)` references in modern-theme.css and per-page
 * inline <style> blocks keep resolving during the cutover.
 */

@custom-variant dark (&:is(.dark *));

:root {
    /* Brand neutrals (warm beige / dark brown) */
    --background: #f4f1ea;
    --foreground: #171513;
    --card: #fbf8f0;
    --card-foreground: #171513;
    --popover: #ffffff;
    --popover-foreground: #171513;

    /* Brand accents */
    --primary: #2c2722;
    --primary-foreground: #efe6d7;
    --secondary: #e7dfd1;
    --secondary-foreground: #24201b;
    --muted: #e7dfd1;
    --muted-foreground: #71685c;
    --accent: #9a6a43;
    --accent-foreground: #fff8ed;
    --destructive: #d4183d;
    --destructive-foreground: #ffffff;

    /* Lines, inputs, focus rings */
    --border: rgba(42, 36, 29, 0.16);
    --input: transparent;
    --input-background: #f3f3f5;
    --switch-background: #cbced4;
    --ring: #9a6a43;

    /* Type system (referenced via JS resize logic if any) */
    --font-size: 16px;
    --font-weight-medium: 500;
    --font-weight-normal: 400;

    /* Shape */
    --radius: 1.25rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);

    /* Charts (kept for parity with victorina, not yet used in glm-quiz) */
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);

    /* Sidebar (not used in glm-quiz but kept for shadcn parity) */
    --sidebar: #ffffff;
    --sidebar-foreground: #171513;
    --sidebar-primary: #030213;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #f5f0e6;
    --sidebar-accent-foreground: #171513;
    --sidebar-border: rgba(42, 36, 29, 0.16);
    --sidebar-ring: #9a6a43;

    /* GLM-QUIZ LEGACY ALIASES — keep existing inline `var(--*)` working */
    --paper: var(--card);
    --paper-strong: #fffaf2;
    --ink: var(--foreground);
    --line: var(--border);
    --accent-blue: var(--primary);          /* old blue accent → brand brown */
    --accent-dark: var(--primary);          /* hover/active dark blue → brand brown */
    --shadow-soft: 0 26px 80px rgba(73, 54, 28, 0.14);
    --good: #157f55;                        /* semantic, not in brand palette */
    --bad: #b54708;                         /* semantic */
    --surface-border: rgba(23, 32, 51, 0.14);
    --surface-muted: #f4f6fb;

    /* Background tiers used in modern-theme.css */
    --bg-primary: var(--background);
    --bg-secondary: var(--paper);
    --bg-tertiary: #fffaf2b8;
    --text-primary: var(--foreground);
    --text-secondary: #475467;
    --text-tertiary: #667085;

    /* Old button tokens kept alive as aliases so existing rules resolve */
    --btn-primary-bg: var(--primary);
    --btn-primary-text: var(--primary-foreground);
    --btn-primary-shadow: 0 14px 30px rgba(44, 39, 34, 0.28);
    --btn-secondary-bg: #ffffff;
    --btn-secondary-text: #1d2939;
    --btn-secondary-border: rgba(23, 32, 51, 0.24);
    --btn-secondary-shadow: 0 8px 20px rgba(23, 32, 51, 0.08);
    --btn-ghost-bg: #f8f9fc;
    --btn-ghost-text: #344054;
    --btn-ghost-border: rgba(23, 32, 51, 0.18);

    /* Old shadow alias */
    --shadow: var(--shadow-soft);

    color-scheme: light;
}

/* Dark mode — kept for parity with victorina; glm-quiz stays light by default.
   Pages can opt in with <html class="dark">. */
.dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.145 0 0);
    --card-foreground: oklch(0.985 0 0);
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(0.269 0 0);
    --input: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
}

/* Body baseline — applies to every page once victorina-tokens is loaded.
   modern-theme.css loads AFTER and may override font/background with the
   legacy gradient look; this sets the victorina baseline first. */
body {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
}