/* ── CoreBIM design tokens ───────────────────────────────────────────────────
   The only place with colour and type values. Two themes:
     :root                       light (default)
     [data-theme="dark"]         dark, set before first paint by the layout script
     @media prefers-color-scheme dark when no theme attribute is present (no JS, or "system" unresolved)
   Flat by design: no gradients, no glow, no drop shadows. Depth comes from hairlines and tone.
   Contrast is enforced by CoreBIM.Tests/DesignTokensTests.cs for both themes.
   The dark block and the media-query block must carry identical declarations (also tested).
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    color-scheme: light;

    /* Palette */
    --paper: #FAFAFA;
    --ink: #111111;
    --ink-2: #4A4A46;               /* secondary text */
    --ink-3: #66665F;               /* tertiary text, still 4.5:1 */
    --surface: #FFFFFF;
    --surface-2: #F1F1EE;
    --hairline: #D9D9D6;            /* decorative rules */
    --hairline-strong: #8C8C86;     /* boundaries of inputs and controls, 3:1 */
    --signal: #FF4B1F;              /* primary actions and revision marks only */
    --signal-ink: #111111;          /* label on the signal fill */
    --link: #C2300C;                /* signal as text, 4.5:1 */
    --scrim: rgba(14, 15, 17, .55); /* modal and drawer backdrop */

    /* Status: tint fill plus matching text colour. Never colour alone: add a word and a shape. */
    --ok: #E2F4E7;    --ok-ink: #14612A;
    --warn: #FBEFCF;  --warn-ink: #704400;
    --bad: #FBE5E2;   --bad-ink: #A01818;
    --info: #E1EEF9;  --info-ink: #0B4A82;

    /* Legacy names, kept as aliases so unmigrated pages keep rendering */
    --bg: var(--paper);
    --border: var(--hairline);
    --border-subtle: #EAEAE7;
    --text: var(--ink);
    --text-2: var(--ink-2);
    --text-3: var(--ink-3);
    --brand: var(--signal);
    --brand-dark: #F03D10;
    --brand-light: #FFE9E2;
    --success: var(--ok-ink);
    --warning: var(--warn-ink);
    --danger: var(--bad-ink);

    /* No shadows (legacy names kept so existing rules resolve) */
    --shadow-sm: none;
    --shadow: none;
    --shadow-lg: none;

    /* Shape, layout, type, motion (type and spacing scales below) */
    --radius-sm: 2px;    /* square-ish controls: 2-4px */
    --radius: 3px;
    --radius-lg: 4px;

    --sidebar-w: 240px;
    --topbar-h: 56px;

    /* Type: display = neo-grotesque (Funnel Sans), text = workhorse sans (Zalando Sans). See docs/design/fonts.md */
    --font-display: 'Funnel Sans', system-ui, sans-serif;
    --font-text: 'Zalando Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    --font: var(--font-text);              /* legacy alias */
    --font-heading: var(--font-display);   /* legacy alias */

    /* Modular scale, ratio 1.25, base 1rem (html is 15px). Hero tracks the viewport: 77px at the comp's 1536 width. */
    --step--1: .8rem;
    --step-0: 1rem;
    --step-1: 1.25rem;
    --step-2: 1.563rem;
    --step-3: 1.953rem;
    --step-4: 2.441rem;
    --step-5: 3.052rem;
    --step-6: 3.815rem;
    --step-hero: clamp(2.5rem, 5vw, 5.2rem);
    --lh-tight: 1.08;
    --lh-snug: 1.25;
    --lh-body: 1.6;
    --tracking-display: -.02em;

    /* Spacing scale (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* 12-column grid */
    --grid-gap: 24px;
    --grid-max: 1440px;
    --grid-margin: clamp(16px, 4vw, 48px);

    --transition: 200ms cubic-bezier(.4,0,.2,1);
}

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

    --paper: #0E0F11;
    --ink: #F2F2EE;
    --ink-2: #B4B5AF;
    --ink-3: #8E908B;
    --surface: #16181B;
    --surface-2: #1D2024;
    --hairline: #2A2C30;
    --hairline-strong: #6A6D74;
    --signal: #FF5A2B;
    --signal-ink: #111111;
    --link: #FF5A2B;
    --scrim: rgba(0, 0, 0, .66);

    --ok: #10281A;    --ok-ink: #7FDD9C;
    --warn: #2C2108;  --warn-ink: #F2C14E;
    --bad: #33120F;   --bad-ink: #FF9C90;
    --info: #0F2236;  --info-ink: #8CC4F5;

    --border-subtle: #1E2023;
    --brand-dark: #FF7344;
    --brand-light: #3A1A12;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --paper: #0E0F11;
        --ink: #F2F2EE;
        --ink-2: #B4B5AF;
        --ink-3: #8E908B;
        --surface: #16181B;
        --surface-2: #1D2024;
        --hairline: #2A2C30;
        --hairline-strong: #6A6D74;
        --signal: #FF5A2B;
        --signal-ink: #111111;
        --link: #FF5A2B;
        --scrim: rgba(0, 0, 0, .66);

        --ok: #10281A;    --ok-ink: #7FDD9C;
        --warn: #2C2108;  --warn-ink: #F2C14E;
        --bad: #33120F;   --bad-ink: #FF9C90;
        --info: #0F2236;  --info-ink: #8CC4F5;

        --border-subtle: #1E2023;
        --brand-dark: #FF7344;
        --brand-light: #3A1A12;
    }
}