/* Knowledge365 design tokens - the single source of truth.
   Every colour, size, space, radius, shadow and duration used anywhere in the
   app pages is declared here. The hardcoded-value audit (tools/) greps all
   other CSS/Razor/JS files and fails on colour or px/rem literals outside this
   file (breakpoints, bare 0 and percentages excepted).

   Every colour is declared twice: a hex fallback first, then the OKLCH form
   that modern browsers use. The contrast audit (tools/contrast-check.mjs)
   parses these blocks and verifies every declared text/background pair. */

@layer reset, tokens, base, layout, components, utilities;

:root {
    /* Typeface stacks - the woff2 files live in /wwwroot/fonts (SIL OFL). */
    --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

    /* Fluid type scale, ratio ~1.25. */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --text-lg: 1.25rem;
    --text-xl: 1.5625rem;
    --text-2xl: 1.9531rem;
    --text-3xl: 2.4414rem;
    --text-display: clamp(2.5rem, 5vw + 1rem, 4.25rem);
    --leading-tight: 1.15;
    --leading-body: 1.65;
    --measure: 68ch;
    --measure-lead: 60ch;
    --measure-display: 20ch;
    --tracking-heading: -0.01em;
    --tracking-caps: 0.08em;

    /* Spacing, 4px base. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;
    --space-10: 4rem;
    --space-11: 5rem;
    --space-12: 6rem;
    --space-section: clamp(3rem, 8vw, 6rem);

    /* Radii - only tag chips are pill-shaped. */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Structural dimensions. */
    --hairline: 1px;
    --bar-width: 3px;
    --focus-width: 2px;
    --focus-offset: 2px;
    --icon-size: 20px;
    --icon-size-lg: 24px;
    --lift: -2px;
    --rise: 8px;
    --blur-header: 12px;
    --grid-size: 64px;
    --card-min-width: 17rem;
    --stagger-step: 40ms;
    --a11y-size: 1px;
    --a11y-offset: -1px;

    /* Motion. */
    --dur-fast: 120ms;
    --dur-base: 220ms;
    --dur-slow: 400ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Layout. */
    --container: 1200px;
    --gutter: clamp(1rem, 4vw, 2rem);
}

/* @theme light */
:root,
[data-theme="light"] {
    /* Paper & ink */
    --color-bg: #FAF8F4;
    --color-bg: oklch(0.9796 0.0057 84.57);
    --color-surface: #FFFFFF;
    --color-surface: oklch(1.0000 0.0000 89.88);
    --color-surface-2: #F3EFE7;
    --color-surface-2: oklch(0.9530 0.0115 84.58);
    --color-ink: #14213D;
    --color-ink: oklch(0.2522 0.0562 264.00);
    --color-ink-muted: #4A5568;
    --color-ink-muted: oklch(0.4474 0.0343 261.32);
    --color-border: #E4DED3;
    --color-border: oklch(0.9023 0.0162 82.79);
    --color-accent: #8C2F39;
    --color-accent: oklch(0.4448 0.1260 17.63);
    --color-accent-soft: #F4E6E7;
    --color-accent-soft: oklch(0.9363 0.0153 12.44);
    /* Gold is reserved for rules, markers and borders - never text. */
    --color-gold: #B08D57;
    --color-gold: oklch(0.6641 0.0831 77.40);
    /* D2: text-safe derivative of the gold family for the hero eyebrow.
       Measured 5.85:1 on --color-bg (AA body text). */
    --color-gold-ink: #7A5C26;
    --color-gold-ink: oklch(0.4946 0.0809 79.57);
    --color-focus: var(--color-accent);

    /* Level badges: text + tint, never colour alone. */
    --color-level-foundational-ink: #2F5D3A;
    --color-level-foundational-ink: oklch(0.4352 0.0769 149.96);
    --color-level-foundational-bg: #E7F0E8;
    --color-level-foundational-bg: oklch(0.9461 0.0143 148.78);
    --color-level-intermediate-ink: #6B4A12;
    --color-level-intermediate-ink: oklch(0.4353 0.0823 75.76);
    --color-level-intermediate-bg: #F6EDDA;
    --color-level-intermediate-bg: oklch(0.9481 0.0269 85.67);
    --color-level-advanced-ink: #7A2E3A;
    --color-level-advanced-ink: oklch(0.4133 0.1062 13.44);
    --color-level-advanced-bg: #F4E6E7;
    --color-level-advanced-bg: oklch(0.9363 0.0153 12.44);

    /* Deterministic 6-tone muted accent palette for card bars. */
    --color-tone-1: #7A3B4A;
    --color-tone-1: oklch(0.4379 0.0889 6.36);
    --color-tone-2: #2F5D62;
    --color-tone-2: oklch(0.4479 0.0510 204.72);
    --color-tone-3: #3B4B6B;
    --color-tone-3: oklch(0.4135 0.0577 263.64);
    --color-tone-4: #8A5A2B;
    --color-tone-4: oklch(0.5107 0.0888 62.82);
    --color-tone-5: #5A4A6B;
    --color-tone-5: oklch(0.4387 0.0565 306.33);
    --color-tone-6: #4A5A3B;
    --color-tone-6: oklch(0.4451 0.0524 130.47);

    /* Layered, soft, ink-tinted elevation. */
    --shadow-1: 0 1px 2px rgba(20, 33, 61, 0.06), 0 2px 6px rgba(20, 33, 61, 0.05);
    --shadow-1: 0 1px 2px oklch(from var(--color-ink) l c h / 0.06), 0 2px 6px oklch(from var(--color-ink) l c h / 0.05);
    --shadow-2: 0 2px 4px rgba(20, 33, 61, 0.08), 0 8px 20px rgba(20, 33, 61, 0.08);
    --shadow-2: 0 2px 4px oklch(from var(--color-ink) l c h / 0.08), 0 8px 20px oklch(from var(--color-ink) l c h / 0.08);
    --shadow-3: 0 4px 8px rgba(20, 33, 61, 0.10), 0 16px 40px rgba(20, 33, 61, 0.12);
    --shadow-3: 0 4px 8px oklch(from var(--color-ink) l c h / 0.10), 0 16px 40px oklch(from var(--color-ink) l c h / 0.12);
}

/* @theme dark-scheme */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #0F1524;
        --color-bg: oklch(0.1979 0.0317 266.89);
        --color-surface: #161E31;
        --color-surface: oklch(0.2373 0.0386 266.12);
        --color-surface-2: #1C2640;
        --color-surface-2: oklch(0.2731 0.0505 267.09);
        --color-ink: #E8E4DA;
        --color-ink: oklch(0.9192 0.0141 88.69);
        --color-ink-muted: #A7B0C0;
        --color-ink-muted: oklch(0.7552 0.0251 262.07);
        --color-border: #2A3552;
        --color-border: oklch(0.3331 0.0536 267.62);
        --color-accent: #E0848D;
        --color-accent: oklch(0.7138 0.1133 14.05);
        --color-accent-soft: #3A2230;
        --color-accent-soft: oklch(0.2881 0.0430 344.24);
        --color-gold: #C9A96E;
        --color-gold: oklch(0.7499 0.0854 82.08);
        /* D2 dark: measured 8.14:1 on --color-bg. */
        --color-gold-ink: #C9A96E;
        --color-gold-ink: oklch(0.7499 0.0854 82.08);
        --color-focus: var(--color-accent);

        --color-level-foundational-ink: #A8D5B0;
        --color-level-foundational-ink: oklch(0.8310 0.0697 149.95);
        --color-level-foundational-bg: #1E3326;
        --color-level-foundational-bg: oklch(0.2988 0.0360 156.30);
        --color-level-intermediate-ink: #E8C98A;
        --color-level-intermediate-ink: oklch(0.8480 0.0879 84.45);
        --color-level-intermediate-bg: #332A17;
        --color-level-intermediate-bg: oklch(0.2897 0.0339 85.04);
        --color-level-advanced-ink: #F0A9B2;
        --color-level-advanced-ink: oklch(0.8048 0.0844 10.75);
        --color-level-advanced-bg: #3A2230;
        --color-level-advanced-bg: oklch(0.2881 0.0430 344.24);

        /* Dark-theme tone variants keep every card bar visible on dark surfaces. */
        --color-tone-1: #C98A97;
        --color-tone-1: oklch(0.6998 0.0786 5.74);
        --color-tone-2: #7FB5BB;
        --color-tone-2: oklch(0.7376 0.0570 204.69);
        --color-tone-3: #93A8D0;
        --color-tone-3: oklch(0.7296 0.0629 263.17);
        --color-tone-4: #C9A06A;
        --color-tone-4: oklch(0.7312 0.0859 73.46);
        --color-tone-5: #A99BC4;
        --color-tone-5: oklch(0.7155 0.0607 300.48);
        --color-tone-6: #9DB08A;
        --color-tone-6: oklch(0.7323 0.0572 129.37);

        --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.40);
        --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.45);
        --shadow-3: 0 4px 10px rgba(0, 0, 0, 0.60), 0 18px 44px rgba(0, 0, 0, 0.50);
    }
}

/* @theme dark-attr */
[data-theme="dark"] {
    --color-bg: #0F1524;
    --color-bg: oklch(0.1979 0.0317 266.89);
    --color-surface: #161E31;
    --color-surface: oklch(0.2373 0.0386 266.12);
    --color-surface-2: #1C2640;
    --color-surface-2: oklch(0.2731 0.0505 267.09);
    --color-ink: #E8E4DA;
    --color-ink: oklch(0.9192 0.0141 88.69);
    --color-ink-muted: #A7B0C0;
    --color-ink-muted: oklch(0.7552 0.0251 262.07);
    --color-border: #2A3552;
    --color-border: oklch(0.3331 0.0536 267.62);
    --color-accent: #E0848D;
    --color-accent: oklch(0.7138 0.1133 14.05);
    --color-accent-soft: #3A2230;
    --color-accent-soft: oklch(0.2881 0.0430 344.24);
    --color-gold: #C9A96E;
    --color-gold: oklch(0.7499 0.0854 82.08);
    --color-gold-ink: #C9A96E;
    --color-gold-ink: oklch(0.7499 0.0854 82.08);
    --color-focus: var(--color-accent);

    --color-level-foundational-ink: #A8D5B0;
    --color-level-foundational-ink: oklch(0.8310 0.0697 149.95);
    --color-level-foundational-bg: #1E3326;
    --color-level-foundational-bg: oklch(0.2988 0.0360 156.30);
    --color-level-intermediate-ink: #E8C98A;
    --color-level-intermediate-ink: oklch(0.8480 0.0879 84.45);
    --color-level-intermediate-bg: #332A17;
    --color-level-intermediate-bg: oklch(0.2897 0.0339 85.04);
    --color-level-advanced-ink: #F0A9B2;
    --color-level-advanced-ink: oklch(0.8048 0.0844 10.75);
    --color-level-advanced-bg: #3A2230;
    --color-level-advanced-bg: oklch(0.2881 0.0430 344.24);

    --color-tone-1: #C98A97;
    --color-tone-1: oklch(0.6998 0.0786 5.74);
    --color-tone-2: #7FB5BB;
    --color-tone-2: oklch(0.7376 0.0570 204.69);
    --color-tone-3: #93A8D0;
    --color-tone-3: oklch(0.7296 0.0629 263.17);
    --color-tone-4: #C9A06A;
    --color-tone-4: oklch(0.7312 0.0859 73.46);
    --color-tone-5: #A99BC4;
    --color-tone-5: oklch(0.7155 0.0607 300.48);
    --color-tone-6: #9DB08A;
    --color-tone-6: oklch(0.7323 0.0572 129.37);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.50), 0 2px 6px rgba(0, 0, 0, 0.40);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 4px 10px rgba(0, 0, 0, 0.60), 0 18px 44px rgba(0, 0, 0, 0.50);
}