/* =============================================================
   FENVA PRECISION — Design Tokens
   Import AFTER css/fenva-fonts.css
   -------------------------------------------------------------
   Accessibility is the #1 mandate. Every text/background pairing
   documented here meets WCAG AA: ≥4.5:1 for body text, ≥3:1 for
   large text (≥24px / ≥18.66px bold) and non-text UI. Measured
   ratios are noted inline as "x.x:1".
   ============================================================= */

:root {
  /* ---------------------------------------------------------
     BRAND — Fenva Blue scale, anchored on #3C588F
     A calm, engineered blue. Used for headings accents,
     eyebrows, links, borders, and dark section grounds.
     --------------------------------------------------------- */
  --blue-50:  #EEF2F8;
  --blue-100: #DEE5F0;
  --blue-200: #BCC8DE;
  --blue-300: #93A5C6;
  --blue-400: #6580AC;
  --blue-500: #3C588F;   /* ANCHOR — eyebrows, links, brand fills. 7.0:1 on white ✓AAA */
  --blue-600: #324A78;   /* link/anchor hover. 8.7:1 on white ✓AAA */
  --blue-700: #293C61;
  --blue-800: #20304E;
  --blue-900: #18233A;   /* DEEP NAVY — dark sections, footer, stat band */
  --blue-950: #101829;   /* deepest ground */

  /* ---------------------------------------------------------
     ACCENT — the single confident action blue.
     RESERVED for primary CTAs ("Get a quote") and key actions.
     Brighter / more saturated than the anchor so it always reads
     as "the button". Do not use it for plain body links.
     --------------------------------------------------------- */
  --accent-400: #3D77EE;
  --accent-500: #1A5CE0;   /* PRIMARY CTA fill — white text on it = 5.8:1 ✓AA */
  --accent-600: #1A4FBE;   /* hover */
  --accent-700: #163F98;   /* pressed */
  --accent-tint:#E9F0FE;   /* faint accent wash — info surfaces */

  /* ---------------------------------------------------------
     NEUTRALS — cool steel slate (echoes the aluminium / machine
     photography). Never warm grey.
     --------------------------------------------------------- */
  --white:     #FFFFFF;
  --slate-50:  #F5F7FA;   /* alt page background */
  --slate-100: #EBEFF4;   /* sunken fills, table stripes */
  --slate-200: #DCE2EA;   /* hairline borders */
  --slate-300: #C3CCD8;   /* strong borders / dividers */
  --slate-400: #97A3B4;   /* disabled text, decorative icons */
  --slate-500: #5F6B7C;   /* captions / meta. 5.4:1 on white ✓AA */
  --slate-600: #44505F;   /* secondary text. 8.3:1 on white ✓AAA */
  --slate-700: #313B49;
  --slate-800: #20293A;
  --slate-900: #14202F;   /* INK — primary text & headings. 15.8:1 ✓AAA */

  /* ---------------------------------------------------------
     SEMANTIC FOREGROUND / SURFACE roles
     --------------------------------------------------------- */
  --fg-1: var(--slate-900);   /* ink — headings, primary copy */
  --fg-2: var(--slate-600);   /* secondary / body-dim */
  --fg-3: var(--slate-500);   /* captions, labels, meta */
  --fg-inverse:      #FFFFFF; /* on navy / accent. 13.5:1 on navy ✓ */
  --fg-inverse-dim:  #B3C2D9; /* dim text on navy. 8.5:1 on --blue-900 ✓ */

  --bg-page:   #FFFFFF;
  --bg-alt:    var(--slate-50);
  --bg-sunken: var(--slate-100);
  --bg-navy:   var(--blue-900);
  --bg-navy-2: var(--blue-950);

  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-navy:   #2A3A55;       /* hairlines on navy surfaces */

  /* Action roles */
  --action:        var(--accent-500);
  --action-hover:  var(--accent-600);
  --action-press:  var(--accent-700);
  --link:          var(--blue-500);
  --link-hover:    var(--blue-600);

  /* ---------------------------------------------------------
     STATUS — all AA on white
     --------------------------------------------------------- */
  --success:    #15803D;  --success-bg: #E8F4EC;   /* 4.8:1 — in tolerance / shipped */
  --warning:    #B45309;  --warning-bg: #FAF0E2;   /* 4.7:1 — review */
  --danger:     #C2271E;  --danger-bg:  #FBE9E8;   /* 5.4:1 — out of spec */
  --info:       var(--accent-500); --info-bg: var(--accent-tint);

  /* ---------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------- */
  --font-sans: "IBM Plex Sans", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-cn:   "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;  /* PingFang SC pending font upload; Noto Sans SC webfont renders as fallback until then */

  /* Type scale — ~1.25 (major third), 16px base. Floors: 12px legal, 14px UI. */
  --text-display: clamp(2.75rem, calc(1.6rem + 4.6vw), 4.5rem);  /* 44 → 72px — hero */
  --text-h1:   clamp(2.25rem, calc(1.7rem + 2.2vw), 2.875rem);   /* 36 → 46px */
  --text-h2:   clamp(1.875rem, calc(1.5rem + 1.5vw), 2.25rem);   /* 30 → 36px */
  --text-h3:   1.75rem;    /* 28px */
  --text-h4:   1.375rem;   /* 22px */
  --text-lg:   1.125rem;   /* 18px — lead body */
  --text-base: 1rem;       /* 16px — body */
  --text-sm:   0.875rem;   /* 14px — caption, table cells, labels */
  --text-xs:   0.75rem;    /* 12px — legal, dense meta */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight:   1.08;
  --leading-snug:    1.22;
  --leading-normal:  1.55;
  --leading-relaxed: 1.72;   /* CN body prefers more line height */

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-label:  0.13em;  /* uppercase eyebrow / label */

  /* ---------------------------------------------------------
     SPACING — 4px base grid
     --------------------------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  --container: 1200px;
  --gutter: clamp(20px, 5vw, 64px);  /* @kind spacing */
  --section-y: clamp(64px, 8vw, 112px);  /* @kind spacing */   /* generous vertical section padding */

  /* ---------------------------------------------------------
     RADII — restrained / technical. Nothing pill-soft.
     --------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;    /* default — buttons, inputs, cards */
  --radius-lg: 10px;
  --radius-xl: 14px;   /* large feature cards */
  --radius-pill: 999px;/* status dots / chips only */

  /* ---------------------------------------------------------
     ELEVATION — soft, cool-tinted, low-spread. Rises only on hover.
     --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(20, 32, 47, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 32, 47, 0.08), 0 1px 2px rgba(20, 32, 47, 0.04);
  --shadow-md: 0 6px 16px rgba(20, 32, 47, 0.09), 0 2px 5px rgba(20, 32, 47, 0.05);
  --shadow-lg: 0 14px 32px rgba(20, 32, 47, 0.12), 0 4px 10px rgba(20, 32, 47, 0.06);
  --shadow-xl: 0 28px 60px rgba(20, 32, 47, 0.18);
  --ring: 0 0 0 3px rgba(26, 92, 224, 0.40);   /* accent focus ring */

  /* Motion — quick, mechanical, no bounce */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur: 200ms;  /* @kind other */
  --dur-slow: 320ms;  /* @kind other */
}