/* Design tokens — the single source of truth for the visual system.
   Supports both Polar Daylight (:root / html[data-theme="light"]) and
   Polar Midnight (html[data-theme="dark"]) with zero FOUC.

   Note: 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,
html[data-theme="light"] {
    color-scheme: light;

    /* --- canvas & surfaces (Polar Daylight) --------------------------------- */
    --ink: #0D1B2A;
    --ink-2: #334A61;
    --muted: #475569;
    --line: #DDE4ED;
    --line-dark: #CBD5E1;
    --card: #FFFFFF;
    --surface: #FAFBFC;
    --subtle-bg: #F6F8FB;
    --wash: #E7ECF4;
    --bg: #F0F4FA;
    --body-wash-1: rgba(0, 95, 204, 0.06);
    --body-wash-2: rgba(0, 168, 168, 0.045);

    /* --- brand & interactive ------------------------------------------------ */
    --accent: #005FCC;
    --accent-hover: #004DB3;
    --accent-dark: #003F94;
    --accent-ink: #FFFFFF;
    --accent-soft: #E8F1FC;
    --accent-soft-hover: #D3E4F8;
    --accent-ring: rgba(0, 95, 204, 0.16);
    --btn-bg: #005FCC;
    --btn-bg-hover: #004DB3;
    --btn-ink: #FFFFFF;
    --field-bg: #F1F4F8;
    --overlay-pill-bg: rgba(255, 255, 255, 0.94);

    /* --- USP highlights & editor picks -------------------------------------- */
    --usp: #C2410C;
    --usp-glow: #F59E0B;
    --usp-soft: #FFF7ED;
    --usp-line: rgba(194, 65, 12, 0.20);
    --usp-ink: #7C2D12;

    /* --- activity & ice-class chips ----------------------------------------- */
    --teal: #00A8A8;
    --teal-ink: #006D6D;
    --teal-bg: #E0F5F5;
    --teal-line: rgba(0, 168, 168, 0.18);

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

    /* --- fixed dark surfaces (footer & photographic hero) ------------------- */
    --header-grad: linear-gradient(135deg, #0B1D3A 0%, #0D3060 50%, #0A4A6E 100%);
    --dark: #0B1D3A;
    --on-dark: #FFFFFF;
    --on-dark-2: rgba(255, 255, 255, 0.58);
    --on-dark-3: rgba(255, 255, 255, 0.12);

    /* --- frosted glass chrome (Glacier-White Glass in Daylight) ------------- */
    --glass-hdr-bg: rgba(255, 255, 255, 0.88);
    --glass-hdr-border: rgba(15, 23, 42, 0.09);
    --glass-hdr-shadow: 0 10px 28px -14px rgba(13, 27, 42, 0.14);
    --glass-deck-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 251, 255, 0.98) 100%);
    --glass-deck-border: rgba(15, 23, 42, 0.10);
    --glass-deck-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 22px 46px -14px rgba(13, 27, 42, 0.18),
        0 4px 12px rgba(13, 27, 42, 0.06);
    --glass-pop-bg: rgba(255, 255, 255, 0.98);
    --glass-pop-border: rgba(15, 23, 42, 0.11);
    --glass-pop-shadow:
        0 20px 44px -10px rgba(13, 27, 42, 0.20),
        0 0 0 1px rgba(15, 23, 42, 0.05);
    --glass-ctrl-bg: rgba(241, 245, 250, 0.90);
    --glass-ctrl-bg-hover: #FFFFFF;
    --glass-ctrl-bg-focus: #FFFFFF;
    --glass-ctrl-border: #D2DCE9;
    --glass-ctrl-border-hover: #A6B8CE;
    --glass-divider: rgba(15, 23, 42, 0.09);
    --glass-ink: #0D1B2A;
    --glass-ink-2: #334A61;
    --glass-muted: #52637A;
    --glass-accent: #005FCC;
    --glass-accent-soft: rgba(0, 95, 204, 0.09);
    --glass-accent-border: rgba(0, 95, 204, 0.26);
    --glass-slider-track: #DAE3EE;
    --glass-slider-connect: rgba(71, 85, 105, 0.34);
    --glass-slider-knob: #FFFFFF;
    --glass-slider-knob-border: #005FCC;

    /* --- photo scrims ------------------------------------------------------- */
    --scrim-card: linear-gradient(to top, rgba(11, 29, 58, 0.60) 0%, rgba(11, 29, 58, 0) 50%);
    --scrim-editorial: linear-gradient(to top, rgba(5, 15, 35, 0.85) 0%,
                                                rgba(5, 15, 35, 0.30) 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-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 20px;
    --r-2xl: 24px;
    --r-pill: 999px;
    --r-full: 999px;

    /* --- type --------------------------------------------------------------- */
    --f-brand: var(--f-sans);
    --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-h1: 400 30px/1.25 var(--f-serif);
    --t-h2: 400 24px/1.25 var(--f-serif);
    --t-h3: 400 20px/1.30 var(--f-serif);
    --t-h4: 600 15px/1.35 var(--f-sans);
    --t-h5: 600 11px/1.40 var(--f-mono);

    --t-label: 600 10px/15px var(--f-sans);
    --t-caps: 700 10px/15px var(--f-sans);
    --t-body: 400 13px/19.5px var(--f-sans);
    --t-title: 400 17px/1.3 var(--f-serif);
    --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);
    --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, 0.06);
    --sh-card-hover: 0 6px 20px rgba(11, 29, 58, 0.10);
    --sh-segment: 0 1px 3px rgba(0, 0, 0, 0.10);
    --sh-pop: 0 10px 28px rgba(11, 29, 58, 0.14);
    --sh-bar: 0 -4px 20px rgba(11, 29, 58, 0.12);

    /* --- layout ------------------------------------------------------------- */
    --container: 1280px;
    --gutter: 24px;
    --header-h: 64px;
    --header-actual-h: 64px;
    --brand-mark-w: 27px;

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

/* ============================================================================
   Polar Midnight (Dark Theme)
   ============================================================================ */
html[data-theme="dark"] {
    color-scheme: dark;

    --ink: #F1F5F9;
    --ink-2: #CBD5E1;
    --muted: #94A3B8;
    --line: rgba(148, 210, 255, 0.14);
    --line-dark: rgba(148, 210, 255, 0.26);
    --card: #0A192F;
    --surface: #0D213B;
    --subtle-bg: #081528;
    --wash: #0E233F;
    --bg: #050E1D;
    --body-wash-1: rgba(14, 165, 233, 0.11);
    --body-wash-2: rgba(0, 168, 168, 0.07);

    --accent: #38BDF8;
    --accent-hover: #7DD3FC;
    --accent-dark: #BAE6FD;
    --accent-ink: #04101F;
    --accent-soft: rgba(56, 189, 248, 0.14);
    --accent-soft-hover: rgba(56, 189, 248, 0.24);
    --accent-ring: rgba(56, 189, 248, 0.25);
    --btn-bg: #0284C7;
    --btn-bg-hover: #0EA5E9;
    --btn-ink: #FFFFFF;
    --field-bg: #102644;
    --overlay-pill-bg: rgba(10, 25, 47, 0.92);

    --usp: #FB923C;
    --usp-glow: #F59E0B;
    --usp-soft: rgba(251, 146, 60, 0.14);
    --usp-line: rgba(251, 146, 60, 0.30);
    --usp-ink: #FDBA74;

    --teal: #2DD4BF;
    --teal-ink: #5EEAD4;
    --teal-bg: rgba(45, 212, 191, 0.13);
    --teal-line: rgba(45, 212, 191, 0.28);

    --ok: #4ADE80;
    --ok-bg: rgba(34, 197, 94, 0.15);
    --ok-line: rgba(74, 222, 128, 0.28);
    --warn: #FBBF24;
    --warn-bg: rgba(245, 158, 11, 0.15);
    --warn-line: rgba(251, 191, 36, 0.28);
    --bad: #F87171;
    --bad-bg: rgba(239, 68, 68, 0.15);
    --bad-line: rgba(248, 113, 113, 0.28);

    --dark: #071426;
    --photo-placeholder: #10243E;

    --glass-hdr-bg: linear-gradient(180deg, rgba(6, 17, 33, 0.94) 0%, rgba(7, 20, 38, 0.92) 100%);
    --glass-hdr-border: rgba(148, 210, 255, 0.14);
    --glass-hdr-shadow: 0 10px 30px -12px rgba(2, 8, 20, 0.55);
    --glass-deck-bg: linear-gradient(180deg, rgba(11, 27, 50, 0.92) 0%, rgba(7, 18, 35, 0.96) 100%);
    --glass-deck-border: rgba(148, 210, 255, 0.18);
    --glass-deck-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 24px 50px -14px rgba(2, 8, 20, 0.65),
        0 4px 14px rgba(2, 8, 20, 0.28);
    --glass-pop-bg: linear-gradient(180deg, rgba(11, 27, 50, 0.98) 0%, rgba(7, 18, 34, 0.99) 100%);
    --glass-pop-border: rgba(148, 210, 255, 0.22);
    --glass-pop-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 22px 48px -12px rgba(2, 8, 20, 0.76),
        0 0 0 1px rgba(3, 10, 20, 0.55);
    --glass-ctrl-bg: rgba(255, 255, 255, 0.055);
    --glass-ctrl-bg-hover: rgba(255, 255, 255, 0.095);
    --glass-ctrl-bg-focus: rgba(255, 255, 255, 0.11);
    --glass-ctrl-border: rgba(148, 210, 255, 0.16);
    --glass-ctrl-border-hover: rgba(148, 210, 255, 0.32);
    --glass-divider: rgba(148, 210, 255, 0.12);
    --glass-ink: #F1F5F9;
    --glass-ink-2: #E2EEFA;
    --glass-muted: rgba(186, 214, 242, 0.68);
    --glass-accent: #38BDF8;
    --glass-accent-soft: rgba(56, 189, 248, 0.16);
    --glass-accent-border: rgba(56, 189, 248, 0.34);
    --glass-slider-track: rgba(148, 210, 255, 0.15);
    --glass-slider-connect: rgba(148, 210, 255, 0.30);
    --glass-slider-knob: #09192E;
    --glass-slider-knob-border: rgba(148, 210, 255, 0.85);

    --sh-card: 0 4px 18px rgba(2, 8, 20, 0.42);
    --sh-card-hover: 0 12px 30px rgba(2, 8, 20, 0.62), 0 0 0 1px rgba(56, 189, 248, 0.18);
    --sh-segment: 0 2px 6px rgba(0, 0, 0, 0.38);
    --sh-pop: 0 20px 48px rgba(2, 8, 20, 0.72);
    --sh-bar: 0 -8px 28px rgba(2, 8, 20, 0.58);
}