/* ===========================================================================
   OpenImpact.Horizon — canonical Sealed Horizon design tokens.
   Load order contract: tokens.css, then base.css, then the app stylesheet.
   The app stylesheet overrides the themeable aliases with its identity.
   =========================================================================== */

@font-face {
    font-family: 'Onest';
    /* Relative URL: must resolve under _content/OpenImpact.Horizon.Css/ */
    src: url('./fonts/Onest-VariableFont_wght.woff2') format('woff2-variations'),
         url('./fonts/Onest-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Fixed scales (never themed) ---- */
    --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
    --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2.5rem;   --space-8: 4rem;

    /* Section rhythm. Deliberately separate from the scale above: the air in a
       flat, minimal layout is architectural — it lives BETWEEN blocks, not
       inside components. Applied only at page and section boundaries. */
    --space-section: 4rem;

    /* Flat-minimal: surfaces take one near-sharp radius; only pills round.
       Moving to a true 0 later is a one-line change to --radius-surface. */
    --radius-surface: 2px;
    --radius-pill: 9999px;

    /* Deprecated ladder — retained as aliases so consuming apps' CSS keeps
       resolving. Remove at the next major. --radius-xl is already unreferenced
       in this repo but is public API, so it is aliased rather than deleted. */
    --radius-xs: var(--radius-surface);
    --radius-sm: var(--radius-surface);
    --radius-md: var(--radius-surface);
    --radius-lg: var(--radius-surface);
    --radius-xl: var(--radius-surface);

    /* Two-tier elevation. The rule: a shadow means "detached and transient",
       never decoration. --shadow-float is the ONLY elevation in the system and
       belongs exclusively to overlays that float without a scrim (Dropdown,
       Select menu, Tooltip, Toast, the Blazor error bar). Scrimmed overlays
       (Modal, SlideOver, BottomSheet) are separated by .modal-scrim instead. */
    --shadow-float: 0 4px 16px rgba(25, 24, 21, 0.12);

    /* Deprecated decorative tiers — retained as public API, flattened to none. */
    --shadow-ring:  none;
    --shadow-lift:  none;
    --shadow-hover: none;

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 150ms;  --dur-base: 200ms;  --dur-slow: 300ms;

    --text-xs: 0.76rem; --text-sm: 0.875rem; --text-base: 1rem;
    --text-lg: 1.25rem; --text-xl: 1.6rem;   --text-2xl: 2rem;
    --line-height: 1.6; --measure: 68ch;

    /* ---- Themeable semantic aliases (the white-label surface) ----
       Defaults are the restrained Sealed Horizon neutrals + teal.
       Apps override these in their identity stylesheet or via ThemeStyle. */
    --accent: #00D4AA;
    --accent-strong: #00A386;
    --accent-soft: rgba(0, 212, 170, 0.10);
    /* Derived, not hardcoded: ThemeStyle emits --accent but NOT --accent-glow,
       so a literal here gives every themed app teal focus rings regardless of
       its accent. Resolves to rgba(0, 212, 170, 0.28) at the default theme. */
    --accent-glow: color-mix(in oklab, var(--accent) 28%, transparent);
    /* Warm stone: near-achromatic neutrals at a paper hue (~91), replacing the
       blue-tinted Slate. Lightness carries over from the previous palette, so
       contrast relationships are unchanged. Note --line was ALREADY warm while
       --ink was blue; the system is now internally consistent. */
    --bg: #FCFBF8;
    --surface: #FFFFFF;
    --surface-sunk: #F6F4F0;
    --ink: #191815;
    --muted: #75736C;
    --line: rgba(25, 24, 21, 0.10);
    /* Same reasoning as --accent-glow. Resolves to alpha 0.061 against the
       default --line, imperceptibly different from the previous 0.06. */
    --line-subtle: color-mix(in oklab, var(--line) 60%, transparent);

    /* Scrollbars are thin and quiet everywhere (ADR 0013). Derived from --muted and --ink so dark
       mode and white-label themes follow. --muted on the page background clears the 3:1 contrast
       WCAG asks of a control's visible part. */
    --scrollbar-thumb: var(--muted);
    --scrollbar-thumb-hover: var(--ink);

    /* The only quoted token. Owned here; NEVER emitted from a Razor <style>
       block (Razor HTML-encodes the quotes and the declaration silently breaks). */
    --font-sans: 'Onest', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* ---- Semantic status ---- */
    --ok: #15803d;  --warn: #b45309;  --danger: #b91c1c;

    /* The same three as TEXT on a surface. --ok/--warn/--danger are also used as backgrounds
       under white text (Toast, danger Button), so they cannot be lightened for dark mode.
       These can: they equal the base colours in light mode and lighten in dark mode, where the
       base colours fall below 4.5:1 as text. */
    --ok-text: var(--ok);  --warn-text: var(--warn);  --danger-text: var(--danger);

    /* ---- Categorical chart colours ----
       Three series colours chosen to be told apart without relying on red versus green.
       They are data colours, not status colours: a chart series is never "good" or "bad". */
    --chart-1: #00A386;  --chart-2: #4B6A88;  --chart-3: #C08A2B;
}

/* ---- Dark mode: attribute-driven, opt in by setting data-theme="dark" on <html>.
   Auto mode is the app's choice via a one-line prefers-color-scheme script. ---- */
[data-theme="dark"] {
    --bg: #11100D;
    --surface: #191714;
    --surface-sunk: #0C0B09;
    --ink: #F5F4F1;
    --muted: #A4A29C;
    --line: rgba(255, 255, 255, 0.10);
    /* The subtle hairline and the accent glow are derived in :root and track
       the overrides above automatically; they are deliberately not restated. */
    --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.50);
    --chart-1: #2DD4B0;  --chart-2: #8FB0D0;  --chart-3: #E0B15B;
    --ok-text: #4ADE80;  --warn-text: #FBBF24;  --danger-text: #F87171;
    /* The accent itself is the brand and stays. Its strong and soft forms are derived from it for the dark canvas, so a
       tenant's dark shade and light tint (set for light mode) do not carry over: strong becomes a lighter mix, soft a
       translucent wash. An app can set its own with Theme.AccentStrongDark and Theme.AccentSoftDark. */
    --accent-strong: color-mix(in srgb, var(--accent) 70%, white);
    --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
    /* --shadow-ring/-lift/-hover inherit `none` from :root; no dark override needed. */
}