/* ===========================================================================
   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);

    /* 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;
}

/* ---- 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);
    /* --shadow-ring/-lift/-hover inherit `none` from :root; no dark override needed. */
}