/*
 * Design tokens — 1:1 from design-artifacts/D-Design-System/01-design-tokens.md
 * Colors + fonts are PROVISIONAL (🟡): exact brand hex and final typefaces get
 * pinned in Phase 7. Everything references these custom properties; pinning is
 * a drop-in value change here.
 *
 * Breakpoints (cannot be custom properties in media queries — keep in sync):
 *   bp-sm 640px · bp-md 768px · bp-lg 1024px · bp-xl 1280px
 */
:root {
    /* Spacing scale (4px grid, baseline space-md) */
    --space-3xs: 2px;
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;
    --space-3xl: 96px;

    /* Icon tiles and step circles: one size everywhere */
    --icon-circle: 56px;
    --icon-glyph: 28px;

    /* Type scale (visual size; semantic level lives in markup) */
    --text-3xs: 11px;
    --text-2xs: 12px;
    --text-xs: 13px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 32px;
    --text-3xl: 48px;

    /* Responsive clamps (hero H1, section H2) */
    --text-3xl-fluid: clamp(32px, 5vw, 48px);
    --text-2xl-fluid: clamp(26px, 3.5vw, 32px);

    /* Brand — blue (trust base) 🟡
       2026-11-06 design pass: deepened for the premium cyber look —
       blue-900 darkened (#0A2540→#0A1628), navy-950 added as the darkest
       anchor (heros, CTA bands), cyan from the live logo promoted to a
       dark-surface accent family. */
    --navy-950: #060C18;
    --blue-900: #0A1628;
    --blue-700: #14467A;
    --blue-500: #1E6FE0;
    --blue-100: #E8F0FB;

    /* Brand — cyan (logo accent; DARK surfaces only — fails AA on light) */
    --cyan-500: #31BBD8;
    --cyan-300: #5BCBE3;

    /* On-dark ink + hairlines (AA-verified: 15.4 / 8.3 on blue-900) */
    --ink-inverse: #E6EDF5;
    --ink-inverse-muted: #9FB1C4;
    --line-dark: rgba(159, 177, 196, .18);

    /* Brand — green/teal (THE single action accent) 🟡
       Darkened from the proposal (#12B886/#0E9F6E): white button text needs
       WCAG AA 4.5:1 and the original only reached 2.55:1. Phase 7 must pin
       the final brand green under the same constraint. */
    --accent-600: #0C6B4C;
    --accent-500: #0F815C;
    --accent-300: #34D399; /* success/check accents on DARK surfaces (9.4:1 on blue-900) */
    --accent-100: #E3F8F0;

    /* Neutrals 🟡 */
    --ink-900: #13202E;
    --ink-600: #566577;
    --ink-400: #8A97A6;
    --line-200: #E2E8F0;
    --surface-0: #FFFFFF;
    --surface-50: #F7F9FB;

    /* Semantic */
    --success: var(--accent-500);
    --error: #C42B36; /* re-pinned 2026-11-09: #CE2F3A was 4.4:1 on the error tint #FBE9EA; this is 4.8:1 on the tint and 5.6:1 on white (AA small text) */
    --warning: #F5A623;
    --info: var(--blue-500);

    /* Typefaces 🟡 (self-hosted; confirm in Phase 7) */
    --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, sans-serif;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Shadows / elevation (soft, blue-tinted) */
    --shadow-sm: 0 1px 2px rgba(16, 42, 67, .06);
    --shadow-md: 0 4px 12px rgba(16, 42, 67, .08);
    --shadow-lg: 0 12px 32px rgba(16, 42, 67, .10);
    /* Focus indicator (WCAG 1.4.11 / 2.4.7): opaque, >= 3:1 against the
       surface. blue-700 on light (10:1 on white), cyan-300 on the dark
       surfaces (re-pinned in main.css for .surface-dark, footer, CTA bands).
       The ring variant adds a 2px surface-coloured gap so it also reads
       against coloured controls (green primary button). */
    --focus-color: var(--blue-700);
    --focus-ring: 0 0 0 2px var(--surface-0), 0 0 0 4px var(--blue-700);

    /* Layout */
    --container-max: 1200px;
    --container-narrow: 760px;
    --gutter: var(--space-md); /* desktop override in main.css at bp-lg */

    /* Motion */
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;
    --ease-standard: cubic-bezier(.2, 0, .2, 1);
}