/**
 * Design tokens — HANDOFF.md §2. Byte-exact hex values, ported verbatim.
 *
 * Do not introduce colours, fonts, radii or shadows outside this set —
 * that rule is in the brief, not a style preference. If a page needs
 * something this file doesn't have, that is a signal to go back to the
 * DC files and find the actual value, not to invent one.
 *
 * Breakpoints cannot live as usable values inside a plain-CSS `@media`
 * condition, so `--rn-bp-*` below is for JS (`matchMedia`, or reading
 * `getComputedStyle(document.documentElement).getPropertyValue(...)`) —
 * every `@media` rule in dist/css/*.css and template-parts CSS should still
 * use the literal four pixel values so JS and CSS never drift apart.
 */

:root {
  /* ---- Colour ---- */
  --rn-navy: #0F367B;
  --rn-navy-deep: #0B2860;
  --rn-blue: #299FEF;
  --rn-blue-hover: #1E8AD9;
  --rn-blue-pressed: #1473B8;
  --rn-gold: #F5BC41;
  --rn-gold-hover: #E5AC31;
  --rn-ink: #121127;
  --rn-body: #494949;
  --rn-line: #EBEBEB;
  --rn-surface: #FAFAFA;
  --rn-surface-blue: #F7FBFF;
  --rn-tint-blue: #EAF6FE;
  --rn-coral: #FF3B53;
  --rn-coral-text: #C41F35;
  --rn-green: #219653;
  --rn-white: #FFFFFF;

  /* ---- Type families ---- */
  --rn-font-display: 'Poppins', system-ui, sans-serif;
  --rn-font-body: 'Inter', system-ui, sans-serif;
  --rn-font-label: 'Sora', 'Noto Sans Devanagari', system-ui, sans-serif;

  /* ---- Type sizes in use across the DCs (px) ---- */
  --rn-fs-66: 66px;
  --rn-fs-62: 62px;
  --rn-fs-54: 54px;
  --rn-fs-50: 50px;
  --rn-fs-46: 46px;
  --rn-fs-44: 44px;
  --rn-fs-40: 40px;
  --rn-fs-38: 38px;
  --rn-fs-34: 34px;
  --rn-fs-32: 32px;
  --rn-fs-30: 30px;
  --rn-fs-28: 28px;
  --rn-fs-27: 27px;
  --rn-fs-26: 26px;
  --rn-fs-25: 25px;
  --rn-fs-23: 23px;
  --rn-fs-22: 22px;
  --rn-fs-21: 21px;
  --rn-fs-20: 20px;
  --rn-fs-19: 19px;
  --rn-fs-18: 18px;
  --rn-fs-17: 17px;
  --rn-fs-16: 16px;
  --rn-fs-15: 15px;
  --rn-fs-14: 14px;
  --rn-fs-13: 13px;
  --rn-fs-12: 12px;
  --rn-fs-11: 11px;
  --rn-fs-10: 10px;

  /* ---- Spacing steps (px) ---- */
  --rn-space-4: 4px;
  --rn-space-8: 8px;
  --rn-space-10: 10px;
  --rn-space-12: 12px;
  --rn-space-14: 14px;
  --rn-space-16: 16px;
  --rn-space-18: 18px;
  --rn-space-22: 22px;
  --rn-space-26: 26px;
  --rn-space-32: 32px;
  --rn-space-40: 40px;
  --rn-space-48: 48px;
  --rn-space-56: 56px;
  --rn-space-72: 72px;
  --rn-space-88: 88px;

  /* ---- Layout ---- */
  --rn-content-width: 1200px;
  --rn-gutter: 40px;      /* desktop */
  --rn-gutter-mobile: 20px; /* <=720px */

  /* ---- Radii ---- */
  --rn-radius-8: 8px;   /* buttons, small cards */
  --rn-radius-9: 9px;   /* campaign controls */
  --rn-radius-10: 10px; /* campaign controls */
  --rn-radius-12: 12px;
  --rn-radius-14: 14px; /* floating search card */
  --rn-radius-16: 16px; /* feature cards */
  --rn-radius-20: 20px; /* large panels */
  --rn-radius-22: 22px; /* large panels */
  --rn-radius-pill: 999px;

  /* ---- Shadows (navy-tinted, never black) ---- */
  --rn-shadow-card: 0 8px 24px rgba(15, 54, 123, 0.06);
  --rn-shadow-floating: 0 12px 32px rgba(15, 54, 123, 0.12);
  --rn-shadow-button-primary: 0 4px 12px rgba(41, 159, 239, 0.3);

  /* ---- The header's one glass treatment — do not reuse elsewhere ---- */
  --rn-glass-bg: rgba(255, 255, 255, 0.72);
  --rn-glass-filter: blur(20px) saturate(165%);

  /* ---- Focus ring — every interactive element, never removed ---- */
  --rn-focus-color: #299FEF;
  --rn-focus-width: 2px;
  --rn-focus-offset: 2px;

  /* ---- Breakpoints (JS reference only — see note above) ---- */
  --rn-bp-1140: 1140px;
  --rn-bp-1080: 1080px;
  --rn-bp-980: 980px;
  --rn-bp-720: 720px;
}