/* Pilot UI 2.0 — design tokens (Phase 0).

   The single source of truth for colour, type, space, shape, depth and
   motion in the redesigned UI. Every value a component or page needs
   comes from here; `ui_lint` ratchets colour literals and heavy weights
   everywhere else down to zero.

   Coexistence: these use a `--ui-` prefix so they can load beside the
   legacy `--jp-*` tokens without changing anything visible. Pages move
   onto them pattern by pattern (Phases 2–4); the legacy file goes once
   nothing reads it.

   Colour is by ROLE, never by page. Every text pairing passes WCAG 2.2 AA
   (4.5:1) and every border / focus ring passes 3:1, in both themes —
   `apps/core/tests_ui.py` recomputes the ratios from this file and fails
   the build if a value drifts below its minimum.

   Gold means match. It fills match badges and strong-fit states; it never
   carries text or lines on a light ground (1.65:1 on white). Actions are
   charcoal (`--ui-action`).
*/

/* Fallback faces sized to match Inter and Geist (measured in Chromium
   against Arial and its metric twins), so the swap when the web fonts
   arrive doesn't reflow the page. Bold text falls back to the bold face,
   whose widths differ. */
@font-face{font-family:'Inter Fallback';font-weight:100 500;src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Liberation Sans');size-adjust:107%;ascent-override:90.5%;descent-override:22.4%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:101.5%;ascent-override:95.6%;descent-override:23.6%;line-gap-override:0%}
@font-face{font-family:'Geist Fallback';font-weight:100 500;src:local('Arial'),local('ArialMT'),local('Helvetica'),local('Liberation Sans');size-adjust:105%;ascent-override:96.1%;descent-override:28.5%;line-gap-override:0%}
@font-face{font-family:'Geist Fallback';font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:101%;ascent-override:100%;descent-override:29.7%;line-gap-override:0%}

:root{
    color-scheme:light;
    /* ── Colour: surfaces ─────────────────────────────────────────────── */
    --ui-canvas:#F7F5EF;          /* page ground */
    --ui-panel:#FFFFFF;           /* cards, sheets, menus */
    --ui-sunken:#EFECE4;          /* wells, table heads, chips at rest */

    /* ── Colour: text ─────────────────────────────────────────────────── */
    --ui-ink:#16150F;             /* primary text — 16.8:1 on canvas */
    --ui-ink-2:#46433A;           /* secondary text — 9.1:1 */
    --ui-muted:#6B6759;           /* tertiary text — 5.2:1 (lowest allowed) */

    /* ── Colour: lines ────────────────────────────────────────────────── */
    --ui-line:#E3DFD4;            /* decorative dividers ONLY — not for controls */
    --ui-control:#878274;         /* field + control borders — 3.25:1 on the darkest (sunken) surface */

    /* ── Colour: action ───────────────────────────────────────────────── */
    --ui-action:#1E1E1C;          /* primary buttons */
    --ui-on-action:#FFFFFF;
    --ui-focus:#16150F;           /* focus ring — 16.8:1 (gold was 1.65:1) */
    /* Fixed in both themes: the logo mark's bar, and the CV "paper"
       (it stays light in dark mode, as the PDF does). */
    --ui-brand-soft:#F6E7A9;
    --ui-paper-ink:#121212; --ui-paper-ink-2:#302D27;
    --ui-paper-muted:#68655D; --ui-paper-muted-2:#8A8170;
    --ui-paper-line:rgba(18,18,18,.10); --ui-paper-wash:#FBFAF6; --ui-paper-accent-ink:#5A4A17;
    /* Buttons on a fixed dark band (closing CTA, map preview); the same in both themes. */
    --ui-inverse:#FFFFFF;
    --ui-on-inverse:#16150F;
    --ui-inverse-line:rgba(255,255,255,.55);

    /* ── Colour: match (gold) ─────────────────────────────────────────── */
    --ui-gold:#E7C75A;            /* fills only on light grounds */
    --ui-on-gold:#16150F;
    --ui-gold-wash:#F7EDC8;
    --ui-gold-ink:#5A4A17;        /* gold-family text — 7.9:1 */

    /* ── Colour: status ───────────────────────────────────────────────── */
    --ui-success:#1E6B4A;   --ui-success-wash:#E3F1EA;
    --ui-info:#2B5BA0;      --ui-info-wash:#E6EEF9;
    --ui-warning:#8A5300;   --ui-warning-wash:#F8ECD9;
    --ui-danger:#A8352A;    --ui-danger-wash:#F8E6E3;

    /* ── Colour: compass moves (darkened from #3a7bd5 / #a85cd4 to pass) ─ */
    --ui-move-stay:#1E6B4A;
    --ui-move-stepup:#5A4A17;
    --ui-move-sideways:#2F64B3;
    --ui-move-pivot:#7A3FA6;

    /* ── Type ─────────────────────────────────────────────────────────── */
    --ui-font-display:'Geist','Geist Fallback',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
    --ui-font-body:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
    --ui-font-serif:'Instrument Serif',Georgia,'Times New Roman',serif;   /* one marketing phrase per page */

    --ui-text-display:clamp(36px,5vw,56px);
    --ui-text-h1:clamp(30px,4vw,40px);
    --ui-text-h2:28px;
    --ui-text-h3:20px;
    --ui-text-body-lg:18px;
    --ui-text-body:16px;
    --ui-text-small:14px;
    --ui-text-label:12px;

    --ui-weight-regular:400;
    --ui-weight-medium:500;
    --ui-weight-strong:600;       /* the ceiling — ui_lint rejects heavier */

    --ui-leading-tight:1.1;
    --ui-leading-body:1.6;
    --ui-tracking-display:-.045em;
    --ui-tracking-heading:-.025em;
    --ui-tracking-label:.12em;
    --ui-measure:68ch;

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

    /* ── Shape ────────────────────────────────────────────────────────── */
    --ui-radius-control:6px;
    --ui-radius-card:10px;
    --ui-radius-sheet:16px;
    --ui-radius-pill:999px;       /* chips + avatars only */

    /* ── Depth (two levels) ───────────────────────────────────────────── */
    --ui-shadow-raised:0 1px 2px rgba(22,21,15,.06),0 4px 12px -4px rgba(22,21,15,.10);
    --ui-shadow-overlay:0 2px 4px rgba(22,21,15,.08),0 24px 48px -16px rgba(22,21,15,.28);
    --ui-scrim:rgba(22,21,15,.45);   /* backdrop behind sheets and dialogs */

    /* ── Motion ───────────────────────────────────────────────────────── */
    --ui-ease:cubic-bezier(.22,.61,.36,1);
    --ui-duration-press:120ms;
    --ui-duration-hover:200ms;
    --ui-duration-sheet:320ms;

    /* ── Touch + layout ───────────────────────────────────────────────── */
    --ui-target:44px;             /* minimum touch target */
    --ui-target-compact:36px;     /* dense desktop controls only */
    --ui-container:1280px;
    --ui-gutter:16px;
}

/* Dark values (Phase 5: dark mode is on). They follow the system theme;
   `data-theme="light"` or `"dark"` on <html> forces one. `color-scheme`
   turns native controls and scrollbars dark too. Keep the two blocks
   identical; the contrast test asserts they match. */
@media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
        color-scheme:dark;
        --ui-canvas:#12110E; --ui-panel:#1C1B17; --ui-sunken:#24221D;
        --ui-ink:#F2EFE6; --ui-ink-2:#C9C4B6; --ui-muted:#9C9686;
        --ui-line:#2E2C26; --ui-control:#757164;
        --ui-action:#F2EFE6; --ui-on-action:#16150F; --ui-focus:#F2EFE6;
        --ui-gold:#E7C75A; --ui-on-gold:#16150F; --ui-gold-wash:#3A3220; --ui-gold-ink:#E7C75A;
        --ui-success:#5FBF93; --ui-success-wash:#1C2E26;
        --ui-info:#7FA8E8; --ui-info-wash:#1C2636;
        --ui-warning:#E2A64B; --ui-warning-wash:#33281A;
        --ui-danger:#EE8A7E; --ui-danger-wash:#36211E;
        --ui-move-stay:#5FBF93; --ui-move-stepup:#E7C75A;
        --ui-move-sideways:#7FA8E8; --ui-move-pivot:#C39BE8;
        --ui-scrim:rgba(0,0,0,.6);
    }
}
:root[data-theme="dark"]{
    color-scheme:dark;
    --ui-canvas:#12110E; --ui-panel:#1C1B17; --ui-sunken:#24221D;
    --ui-ink:#F2EFE6; --ui-ink-2:#C9C4B6; --ui-muted:#9C9686;
    --ui-line:#2E2C26; --ui-control:#757164;
    --ui-action:#F2EFE6; --ui-on-action:#16150F; --ui-focus:#F2EFE6;
    --ui-gold:#E7C75A; --ui-on-gold:#16150F; --ui-gold-wash:#3A3220; --ui-gold-ink:#E7C75A;
    --ui-success:#5FBF93; --ui-success-wash:#1C2E26;
    --ui-info:#7FA8E8; --ui-info-wash:#1C2636;
    --ui-warning:#E2A64B; --ui-warning-wash:#33281A;
    --ui-danger:#EE8A7E; --ui-danger-wash:#36211E;
    --ui-move-stay:#5FBF93; --ui-move-stepup:#E7C75A;
    --ui-move-sideways:#7FA8E8; --ui-move-pivot:#C39BE8;
    --ui-scrim:rgba(0,0,0,.6);
}