/* tokens.css — design B "Clear Horizon". Every colour, font, size and timing used by site.css lives here.
   Anchor measured on the source (audit/design-baseline.json, src/styles/source-tokens.css): the azure #0081b0. It is
   4.41:1 on white, so it is used only for large text, icons and decoration; links and buttons use --azure-deep.
   WCAG ratios (computed): ink/white 16.5 · ink/ice 15.3 · text/white 12.8 · text/ice 11.8 · muted/white 6.7 ·
   muted/ice 6.2 · muted/ice-2 5.7 · azure-deep/white 5.95 · azure-deep/ice 5.5 · white on azure-deep button 5.95 ·
   navy on sun button 9.2 · on-navy/navy 15.2 · on-navy-muted/navy 9.7 · sky/navy 8.7 · sun/navy 9.2 ·
   on-navy-muted/navy-2 7.7 · sky/navy-2 6.9 · azure-deep/azure-tint 5.2 · sun-ink/sun-tint 5.8 · ink/sun-tint 15.0.
   Hero text sits on the photo under a navy gradient that is ≥88% opaque behind the copy column. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/natchitocheseye/assets/fonts/manrope-latin.woff2) format('woff2'); }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/natchitocheseye/assets/fonts/lexend-latin-var.woff2) format('woff2'); }

:root {
  /* grounds */
  --white: #ffffff;
  --ice: #f3f7fb;
  --ice-2: #e6eef6;
  --mist: #d5e2ee;
  /* text */
  --ink: #0b1f3a;
  --text: #1f3350;
  --muted: #4a5d78;
  /* brand */
  --navy: #0b1f3a;
  --navy-2: #12305a;
  --navy-deep: #071629;
  --azure: #0081b0;
  --azure-deep: #006b94;
  --azure-tint: #e3f2f8;
  --sky: #7cc6e6;
  --sun: #f5b700;
  --sun-2: #ffc933;
  --sun-tint: #fff4cc;
  --sun-ink: #7a5a00;
  /* on dark */
  --on-navy: #f1f6fb;
  --on-navy-muted: #b8c8dc;
  /* lines, glass, shadows */
  --line: #dbe5ef;
  --line-strong: #b9c9da;
  --line-navy: rgba(241, 246, 251, 0.16);
  --glass: rgba(255, 255, 255, 0.78);
  --glass-navy: rgba(11, 31, 58, 0.55);
  --glass-line: rgba(255, 255, 255, 0.28);
  --wash-navy: rgba(241, 246, 251, 0.08);
  --veil-strong: rgba(7, 22, 41, 0.92);
  --veil-mid: rgba(7, 22, 41, 0.62);
  --veil-soft: rgba(7, 22, 41, 0.18);
  --scrim: rgba(7, 22, 41, 0.6);
  --shadow: 0 1px 2px rgba(11, 31, 58, 0.06), 0 14px 34px -20px rgba(11, 31, 58, 0.3);
  --shadow-lift: 0 2px 8px rgba(11, 31, 58, 0.08), 0 30px 64px -30px rgba(11, 31, 58, 0.45);

  /* type: an 18px base (Lexend reads large) and a confident geometric display */
  --f-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 0.875rem;
  --fs-sm: 1rem;
  --fs-base: 1.125rem;
  --fs-md: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);
  --fs-lg: clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem);
  --fs-xl: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  --fs-2xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  --fs-3xl: clamp(2.125rem, 1.5rem + 2.4vw, 3.5rem);
  --fs-hero: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
  --lh-body: 1.7;
  --lh-head: 1.12;

  /* space + shape */
  --wrap: 1260px;
  --gutter: clamp(20px, 4vw, 40px);
  --gap: clamp(16px, 2vw, 24px);
  --gap-lg: clamp(28px, 4.5vw, 72px);
  --section-y: clamp(68px, 8.5vw, 128px);
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;
  --tap: 48px;
  --header-h: 76px;
  --header-top: 14px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-reveal: 700ms;
}