/* Design tokens — the single source of truth for the visual system.
   Values measured off the redesign prototype, not eyeballed from an image.

   The eleven legacy token names (--ink, --muted, --line, --bg, --card, --accent,
   --accent-soft, --accent-ink, --ok, --warn, --bad) are kept and simply point at the
   new palette, so every rule in app.css that already uses them is re-skinned without
   being touched.

   One trap worth knowing before using the type shortcuts below: the `font:` shorthand
   resets font-variant-numeric to `normal`. Anything that sets `font: var(--t-num)`
   must declare `font-variant-numeric: tabular-nums` AFTER it, never before. */

:root {
    /* --- colour ------------------------------------------------------------- */
    --ink: #0D1B2A;
    --ink-2: #334A61;
    --muted: #64748B;
    --line: #DDE4ED;
    --card: #ffffff;
    --surface: #FAFBFC;
    --bg: #F0F4FA;

    --accent: #005FCC;
    --accent-ink: #ffffff;
    --accent-soft: #E8F1FC;
    --accent-ring: rgba(0, 95, 204, .15);
    --field-bg: #F1F4F8;                      /* filled, borderless filter inputs */

    /* activity chips */
    --teal: #00A8A8;
    --teal-bg: #E0F5F5;
    --teal-line: rgba(0, 168, 168, .18);

    /* status */
    --ok: #1A7A45;
    --ok-bg: #E6F6EE;
    --ok-line: rgba(26, 122, 69, .2);
    --warn: #B26A00;
    --warn-bg: #FDF4E3;
    --warn-line: rgba(178, 106, 0, .2);
    --bad: #B83232;
    --bad-bg: #FDF1F1;
    --bad-line: rgba(184, 50, 50, .2);

    /* dark surfaces */
    --header-grad: linear-gradient(135deg, #0B1D3A 0%, #0D3060 50%, #0A4A6E 100%);
    --dark: #0B1D3A;
    --on-dark: #ffffff;
    --on-dark-2: rgba(255, 255, 255, .55);
    --on-dark-3: rgba(255, 255, 255, .12);

    /* photo scrims */
    --scrim-card: linear-gradient(to top, rgba(11, 29, 58, .6) 0%, rgba(11, 29, 58, 0) 50%);
    --scrim-editorial: linear-gradient(to top, rgba(5, 15, 35, .85) 0%,
                                                rgba(5, 15, 35, .3) 55%,
                                                rgba(5, 15, 35, 0) 100%);
    --photo-placeholder: #C9D6E3;

    /* --- space (4px base) --------------------------------------------------- */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 20px;
    --s6: 24px;
    --s8: 32px;
    --s10: 40px;
    --s12: 48px;
    --s16: 64px;

    /* --- radius ------------------------------------------------------------- */
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-pill: 999px;

    /* --- type --------------------------------------------------------------- */
    --f-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
    --f-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --t-label: 600 10px/15px var(--f-sans);   /* uppercase field labels */
    --t-caps: 700 10px/15px var(--f-sans);    /* operator / ship links, eyebrows */
    --t-body: 400 13px/19.5px var(--f-sans);
    --t-title: 400 17px/1.3 var(--f-serif);   /* card headline — serif, per the design */
    --t-nav: 400 13px/1.2 var(--f-sans);
    --t-badge: 600 11px/1.2 var(--f-sans);
    --t-num: 400 12px/18px var(--f-mono);     /* dates, counts */
    --t-price: 600 17px/1.2 var(--f-mono);

    --ls-label: .07em;
    --ls-caps: .12em;
    --ls-tight: -.012em;

    /* --- elevation ---------------------------------------------------------- */
    --sh-card: 0 1px 4px rgba(11, 29, 58, .06);
    --sh-card-hover: 0 6px 20px rgba(11, 29, 58, .10);
    --sh-segment: 0 1px 3px rgba(0, 0, 0, .1);
    --sh-pop: 0 10px 28px rgba(11, 29, 58, .14);
    --sh-bar: 0 -4px 20px rgba(11, 29, 58, .12);

    /* --- layout ------------------------------------------------------------- */
    --container: 1280px;
    --gutter: 24px;
    --header-h: 80px;
    --brand-mark-w: 27px;                     /* 38px tall at the mark's 30:42 ratio */

    /* --- stacking ----------------------------------------------------------- */
    --z-offerbar: 20;
    --z-tray: 25;
    --z-sticky: 30;
    --z-spinner: 40;
    --z-dialog: 50;
    --z-skiplink: 60;
}
