/*
 * Design tokens for the next TMS landing page.
 *
 * Palette sampled from the approved design mock rather than guessed: band histograms across the hero
 * CTA row, stats strip, feature cards, process band, CTA banner and footer yielded the greens
 * (#0D9E65 / #0E9061 / #037D4F), the navy (#071D3E / #0B2447), the orange (#FB720D) and the two
 * support hues (#0E6DEF, #7A5AF8).
 *
 * Two of the mock's colours were adjusted because they cannot pass WCAG AA as used:
 *   - the button green #0E9061 gives a white label only 4.05:1 → darkened to #0A7F4E (5.05:1)
 *   - the orange #FB720D gives only 2.79:1 on white, which fails even the 3:1 large-text /
 *     non-text floor for the stat numerals and icon glyphs → #EE6900 for those (3.16:1)
 * Both shifts are small enough to read as the same palette.
 *
 * The brand mark is the product's own logo (frontend/projects/center/public/logo-mark.png) recoloured
 * into this palette, NOT a hand-trace of the design's mark — a real mark beats a redrawn one.
 *
 * Measured contrast of every value used as text, icon or numeral:
 *   --brand-600 on #fff .............. 5.05:1  (primary button fill; its white label matches)
 *   --brand-700 on #fff .............. 5.18:1  (green text, eyebrows)  — 4.77:1 on --surface-tint
 *   --brand-500 on #fff .............. 3.45:1  (fills/glyphs/large numerals only)
 *   --ink-900   on #fff ............. 15.47:1
 *   --ink-700   on #fff .............. 9.64:1
 *   --ink-500   on #fff .............. 5.34:1  (body copy)  — 4.91:1 on --surface-tint
 *   --accent-600 on #fff ............. 3.16:1  (orange glyphs and large numerals)
 *   --accent-btn on #fff ............. 4.98:1  (CTA button; its white label matches)
 *   --accent-700 on #fff ............. 5.42:1  (the only orange allowed as body text)
 *   --accent-500 on #fff ............. 2.79:1  ← FILL ONLY: gradients, rules, the logotype
 *   --blue-500 / --violet-500 ........ 4.72:1 / 4.52:1
 *   --on-dark on --navy-900 ......... 16.74:1 ; --on-dark-muted 10.48:1
 */

:root {
  /* Brand green — the design's primary. */
  --brand-50: #e9f6f0;
  --brand-100: #d2ecdf;
  --brand-400: #34b884;
  --brand-500: #0d9e65; /* fills, glyphs, large numerals */
  --brand-600: #0a7f4e; /* primary button fill — 5.05:1 with a white label */
  --brand-700: #037d4f; /* green TEXT on light backgrounds */
  --brand-800: #097448; /* button hover */
  --brand-900: #0a4a35;

  /* Accent orange — the mark's sail and the second half of the wordmark. */
  --accent-50: #fef1e7;
  --accent-500: #fb720d; /* FILL ONLY — gradients, rules, logotype */
  --accent-600: #ee6900; /* orange glyphs + large numerals (3.16:1) */
  --accent-btn: #b85108; /* CTA button fill — the mock's #fe6f0c gives a white label only 2.80:1 */
  --accent-700: #b24a00; /* the only orange allowed as body text (5.42:1) */

  /* Support hues: the stats tiles and the process steps each own one. */
  --blue-50: #e8f0fe;
  --blue-500: #0e6def;
  --blue-700: #0b52b8;
  --violet-50: #f1edfe;
  --violet-500: #7a5af8;
  --violet-700: #5b3fd6;

  /* Ink, navy and neutrals */
  --navy-900: #071d3e;
  --navy-800: #0b2547;
  --ink-900: #0b2447; /* headings */
  --ink-700: #33465e;
  --ink-500: #5d6c82; /* body copy */
  --line: #e6ebf1;
  --surface: #ffffff;
  --surface-alt: #f7fafc; /* page background */
  --surface-tint: #f1f6fb; /* tinted bands (process, app) */
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.78);
  --on-dark-line: rgba(255, 255, 255, 0.14);

  /* Type scale — fluid; 1.25 ratio, clamped so no breakpoint is needed for text alone. */
  --fs-h1: clamp(2.25rem, 1.42rem + 3.1vw, 3.375rem); /* 36 → 54 */
  --fs-h2: clamp(1.75rem, 1.32rem + 1.6vw, 2.5rem); /* 28 → 40 */
  --fs-h3: clamp(1.0625rem, 1.01rem + 0.3vw, 1.1875rem);
  --fs-lead: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --fs-base: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-stat: clamp(1.5rem, 1.25rem + 1vw, 2rem);

  /* Spacing — 4px steps */
  --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;

  /* Shape — the design's corner language: soft cards, slightly tighter buttons. */
  --radius-card: 14px;
  --radius-lg: 18px;
  --radius-btn: 10px;
  --radius-pill: 999px;
  --radius-badge: 12px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(7, 29, 62, 0.04), 0 8px 24px rgba(7, 29, 62, 0.06);
  --shadow-soft: 0 2px 6px rgba(7, 29, 62, 0.05), 0 12px 32px rgba(7, 29, 62, 0.08);
  --shadow-lift: 0 8px 20px rgba(7, 29, 62, 0.1), 0 28px 60px rgba(7, 29, 62, 0.14);

  /* Layout */
  --container: 1280px;
  --gutter: 24px;
  --header-h: 68px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur: 200ms;
}