/* =============================================================================
   Swat iQua Suite — design tokens (design D, final 2026-11-02)
   Logo navy #212843 + sky blue #01A0DE on white; navy contrast bands. (Legacy teal/ink/paper values kept as raw
   palette for stamps/grids only.)
   All text pairs verified WCAG 2.2 AA (see plans/website-plan.md §5). Load before every other stylesheet.
   ============================================================================= */

/* ---- Fonts (self-hosted, Latin subset, OFL — licences in /assets/fonts) ---- */
@font-face {
    font-family: "Instrument Sans";
    src: url("../fonts/instrument-sans-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Instrument Sans";
    src: url("../fonts/instrument-sans-italic-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
/* Metric-matched fallback keeps CLS near zero while the web font swaps in. */
@font-face {
    font-family: "Instrument Sans Fallback";
    src: local("Arial");
    size-adjust: 97%;
    ascent-override: 96%;
    descent-override: 25%;
    line-gap-override: 0%;
}

:root {
    color-scheme: light;

    /* ---- Palette: raw ---- */
    --ink-950: #07111d;
    --ink-900: #0c1a2b;   /* primary text, dark band bg — 15.8:1 on paper */
    --ink-800: #13263d;   /* dark band raised surface */
    --ink-700: #33445a;   /* secondary text — 9.0:1 on paper */
    --ink-500: #56667a;   /* muted text — 5.3:1 on paper, 4.76:1 on paper-2 */
    --ink-300: #a3b3c4;   /* muted text on dark — 8.2:1 on ink-900 */
    --ink-100: #eaf0f4;   /* text on dark — 15.3:1 on ink-900 */

    --paper:   #f6f3ec;   /* page background (warm off-white) */
    --paper-2: #ece7dc;   /* alternate section */
    --surface: #ffffff;   /* cards, inputs */

    --teal-700: #0a6e6e;  /* links / accent text — 5.5:1 on paper */
    --teal-600: #0b7a78;  /* primary button bg — white text 5.2:1 */
    --teal-500: #129a95;  /* decorative only (lines, dots, chart strokes) */
    --teal-300: #5ccfc4;  /* accent on dark — 9.3:1 on ink-900 */
    --teal-100: #d6f1ee;  /* tint (badges, highlights) */

    --line:        #d9d2c3;  /* hairlines, dividers (decorative) */
    --line-strong: #857d6c;  /* form-control borders — ≥3.3:1 (WCAG 1.4.11) */
    --line-dark:   #2a3f58;  /* hairlines on dark */
    --line-dark-strong: #4e6a88; /* control borders on dark — 3.1:1 */

    /* Status (lab-paperwork semantics: released / rejected / on hold) */
    --pass: #17663a;  --pass-on-dark: #6fcf8e;
    --fail: #a3221b;  --fail-on-dark: #ff8a80;
    --hold: #7a4f00;  --hold-on-dark: #f2c14e;

    /* ---- Brand (logo) palette — AA pairs: navy on white 14.5:1 · blue on white 6.0:1 · white on blue 6.0:1 ·
       sky-text on navy 6.2:1 · navy-deep on sky 5.7:1 (white on sky FAILS — never use) ---- */
    --navy: #212843;
    --navy-deep: #161b33;
    --navy-2: #2b3357;
    --sky: #01a0de;          /* decorative, and button bg on dark with navy-deep text */
    --sky-text: #38b6e8;     /* text/links on navy */
    --blue: #07587c;         /* text, links, buttons — 5.7:1 on --bg, 5.2:1 on --cool, 7.8:1 on white */
    --blue-hover: #05445f;
    --tint: #e6f5fc;
    --cool: #cbdcf0;         /* alternate sections (corporate blue) */

    /* ---- Palette: semantic (light context) ---- */
    --bg: #d9e6f5;           /* page background: corporate blue, no plain-white blocks (user, 2026-11-02) */
    --bg-alt: var(--cool);
    --bg-raised: #ffffff;
    --text: var(--navy);
    --text-2: #3d4766;       /* 9.9:1 on white */
    --text-muted: #465070;   /* 5.8:1 on --bg, 5.3:1 on --cool, 8:1 on white cards */
    --accent: var(--blue);
    --accent-strong: var(--blue);
    --accent-contrast: #ffffff;
    --border: #c3d3e8;
    --border-control: #6b7593; /* ≥ 3:1 control borders on white, --bg and --cool (WCAG 1.4.11) */
    --focus: var(--blue);

    /* ---- Typography ---- */
    --font-sans: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Fluid type scale (min @ 360px → max @ 1440px), ratio ≈ 1.2 → 1.25 */
    --step--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);   /* micro labels */
    --step--1: clamp(0.84rem, 0.82rem + 0.12vw, 0.92rem);   /* small, captions */
    --step-0:  clamp(1.00rem, 0.97rem + 0.17vw, 1.125rem);  /* body */
    --step-1:  clamp(1.18rem, 1.12rem + 0.30vw, 1.40rem);   /* lead / h4 */
    --step-2:  clamp(1.40rem, 1.28rem + 0.55vw, 1.80rem);   /* h3 */
    --step-3:  clamp(1.70rem, 1.48rem + 1.00vw, 2.40rem);   /* h2 */
    --step-4:  clamp(2.05rem, 1.68rem + 1.70vw, 3.20rem);   /* h1 */
    --step-5:  clamp(2.45rem, 1.85rem + 2.70vw, 4.30rem);   /* display (home hero) */

    --lh-tight: 1.08;
    --lh-heading: 1.18;
    --lh-body: 1.6;
    --tracking-tight: -0.022em;
    --tracking-label: 0.08em;
    --measure: 68ch;

    /* ---- Spacing (4px base, fluid for section rhythm) ---- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;
    --space-xl: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    --space-2xl: clamp(2.75rem, 2.2rem + 2.4vw, 4.25rem);
    --space-3xl: clamp(3.5rem, 2.6rem + 3.6vw, 6rem);
    --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);    /* 16px side gutter on phones */
    --container: max(76rem, 84vw);                  /* ≥ 80 % of the viewport on every screen (user, 2026-11-03) */
    --container-narrow: 48rem;

    /* ---- Shape ---- */
    --radius-xs: 2px;     /* data cells, badges — paperwork feel */
    --radius-s: 4px;      /* inputs, buttons */
    --radius-m: 8px;      /* cards */
    --radius-l: 14px;     /* screenshot frames, feature panels */
    --radius-pill: 999px;
    --hairline: 1px;

    /* ---- Elevation (cool, low, precise) ---- */
    --shadow-1: 0 1px 2px rgb(12 26 43 / 0.06), 0 1px 1px rgb(12 26 43 / 0.04);
    --shadow-2: 0 2px 6px rgb(12 26 43 / 0.06), 0 8px 24px -8px rgb(12 26 43 / 0.12);
    --shadow-3: 0 4px 12px rgb(12 26 43 / 0.08), 0 24px 56px -16px rgb(12 26 43 / 0.22);
    --shadow-focus: 0 0 0 3px #ffffff, 0 0 0 5px var(--focus);

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-1: 120ms;   /* hover, press */
    --dur-2: 220ms;   /* menus, accordions */
    --dur-3: 420ms;   /* section reveals */
    --dur-4: 900ms;   /* signature animations */

    /* ---- Motifs ---- */
    --grid-size: 24px;  /* lab-paper grid */
    --grid-line: rgb(33 40 67 / 0.055);
    --grid-line-dark: rgb(234 240 244 / 0.06);

    /* ---- Layers ---- */
    --z-header: 50;
    --z-menu: 60;
    --z-sticky-cta: 70;
    --z-banner: 80;
}

/* Dark contrast band — apply `.band-dark` to any section. Re-maps semantic tokens to the navy palette. */
.band-dark {
    color-scheme: dark;
    --bg: var(--navy);
    --bg-alt: var(--navy-deep);
    --bg-raised: var(--navy-2);
    --text: #ffffff;
    --text-2: #c9d0e6;
    --text-muted: #b9c1dd;
    --accent: var(--sky-text);
    --accent-strong: var(--sky);
    --accent-contrast: var(--navy-deep);
    --border: #3a4468;
    --border-control: #7e89b3;
    --focus: var(--sky-text);
    --grid-line: var(--grid-line-dark);
    --pass: var(--pass-on-dark);
    --fail: var(--fail-on-dark);
    --hold: var(--hold-on-dark);
    --shadow-focus: 0 0 0 3px var(--navy), 0 0 0 5px var(--focus);
    background-color: var(--bg);
    color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-1: 0ms;
        --dur-2: 0ms;
        --dur-3: 0ms;
        --dur-4: 0ms;
    }
}