/*
 * Single source of visual values for the portal (DEC-AB122-043, ACC-AB122-144).
 *
 * Colour tokens use light-dark(); js/theme-init.js sets html[data-theme] before first paint, which
 * pins color-scheme and therefore every light-dark() branch. Without JavaScript the OS preference applies.
 *
 * Families checked by the contrast test (ACC-AB122-142) — every token under these prefixes must be a
 * resolvable colour: --surface-*, --text-*, --category-*. Never use --neutral-* or --accent-*: those
 * prefixes belong to Fluent UI and are only assigned in fluent-adapter.css.
 */

:root {
    color-scheme: light dark;

    /* Primitives: Smartskill teal. */
    --teal-50: #eef7f6;
    --teal-200: #a9d8d4;
    --teal-300: #74bdb8;
    --teal-500: #00807e;
    --teal-600: #006b6a;
    --teal-700: #005253;
    --teal-900: #0f2c2c;

    /* Primitives: warm sand neutrals. */
    --sand-0: #ffffff;
    --sand-50: #f7f5f0;
    --sand-75: #f3f0ea;
    --sand-100: #efebe3;
    --sand-150: #e8e3d9;
    --sand-200: #e2ddd2;
    --sand-300: #cdc6b8;
    --sand-400: #a8a092;
    --sand-450: #8f877a;
    --sand-500: #7d766a;
    --sand-600: #625c52;
    --sand-700: #4a453e;
    --sand-750: #3d3933;
    --sand-800: #332f29;
    --sand-820: #2f2c27;
    --sand-840: #2a2723;
    --sand-860: #26241f;
    --sand-880: #211f1b;
    --sand-900: #1f1c18;
    --sand-920: #1a1916;
    --sand-950: #141311;

    /* Surfaces. */
    --surface-base: light-dark(var(--sand-50), var(--sand-950));
    --surface-sidebar: light-dark(var(--sand-100), var(--sand-920));
    --surface-card: light-dark(var(--sand-0), var(--sand-880));
    --surface-raised: light-dark(var(--sand-0), var(--sand-840));
    --surface-muted: light-dark(var(--sand-100), var(--sand-860));
    --surface-hover: light-dark(var(--sand-150), var(--sand-800));
    --surface-input: light-dark(var(--sand-0), var(--sand-920));
    --surface-brand: light-dark(var(--teal-50), var(--teal-900));

    /* Text. */
    --text-primary: light-dark(var(--sand-900), var(--sand-75));
    --text-secondary: light-dark(var(--sand-700), var(--sand-300));
    --text-muted: light-dark(var(--sand-600), var(--sand-400));
    --text-code: light-dark(#a3245a, #f0a3c2);

    /* Brand and interaction. */
    --brand: light-dark(var(--teal-600), var(--teal-300));
    --brand-strong: light-dark(var(--teal-700), var(--teal-200));
    --on-brand: light-dark(var(--sand-0), var(--sand-950));
    --focus-ring: light-dark(var(--teal-600), var(--teal-300));

    /* Lines. --line-control is the only line that must meet 3:1 (input and control boundaries). */
    --line-subtle: light-dark(var(--sand-200), var(--sand-820));
    --line-default: light-dark(var(--sand-300), var(--sand-750));
    --line-strong: light-dark(var(--sand-400), var(--sand-600));
    --line-control: light-dark(var(--sand-500), var(--sand-450));

    /* Status. Each text colour meets 4.5:1 on its subtle background and on --surface-card. */
    --danger-text: light-dark(#b42318, #f59f94);
    --danger-subtle: light-dark(#fdecea, #3a1c19);
    --warning-text: light-dark(#8a5300, #f0bf6a);
    --warning-subtle: light-dark(#fdf3e1, #362812);
    --success-text: light-dark(#1e6b3a, #7fd19b);
    --success-subtle: light-dark(#e6f4ea, #16301f);
    --info-text: light-dark(#1f5f8b, #8cc4ea);
    --info-subtle: light-dark(#e6f0f8, #142a3a);

    /* Category accents: one per CategoryIcon, 3:1 against every surface (icons are non-text). */
    --category-book: light-dark(#b45309, #fcd34d);
    --category-code: light-dark(#0f766e, #5eead4);
    --category-file-text: light-dark(#2563eb, #93c5fd);
    --category-folder: light-dark(#7c3aed, #c4b5fd);
    --category-help-circle: light-dark(#0e7490, #67e8f9);
    --category-layers: light-dark(#15803d, #86efac);
    --category-lightbulb: light-dark(#a16207, #fde047);
    --category-rocket: light-dark(#c2410c, #fdba74);
    --category-settings: light-dark(var(--sand-600), var(--sand-300));
    --category-users: light-dark(#be185d, #f9a8d4);
    --category-zap: light-dark(#b91c1c, #fca5a5);

    /* Elevation and overlays. */
    --shadow-tint: light-dark(rgba(46, 38, 26, 0.08), rgba(0, 0, 0, 0.45));
    --shadow-sm: 0 1px 2px var(--shadow-tint);
    --shadow-md: 0 4px 14px var(--shadow-tint);
    --shadow-lg: 0 14px 32px var(--shadow-tint);
    --overlay-backdrop: light-dark(rgba(33, 29, 23, 0.4), rgba(0, 0, 0, 0.6));

    /* Typography. */
    --font-body: "Inter Variable", "Segoe UI", system-ui, sans-serif;
    --font-display: "Source Serif 4 Variable", Georgia, "Times New Roman", serif;
    --font-mono: "JetBrains Mono Variable", ui-monospace, "Cascadia Code", monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.375rem;
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2.25rem;
    --leading-tight: 1.2;
    --leading-normal: 1.55;
    --tracking-label: 0.08em;

    /* Spacing. */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Shape. */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Motion. */
    --duration-fast: 120ms;
    --duration-base: 180ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --transition: var(--duration-base) var(--ease-standard);

    /* Layout. */
    --header-height: 3.5rem;
    /* Wide enough for the "Search all documents…" trigger with its Ctrl K hint (ACC-AB122-157). */
    --sidebar-width: 18.5rem;
    --content-max-width: 72rem;
    --reading-max-width: 48rem;
}

html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}