/*
  Sterlingrid design tokens.
  Every colour, font, radius, shadow and spacing value used on the site lives here.
  Source: Sterlingrid brand kit (README and Brand Book). Components in site.css only use these variables.
*/
:root{
  /* Brand palette */
  --navy:#004225;          /* primary: text on light, main dark surface */
  --navy-deep:#002E1A;     /* darker tiles on navy */
  --green:#1B6B47;         /* Ledger Green: accent on light, selected cell, approved */
  --sage:#D6B46E;          /* accent on dark only (fails contrast on white) */
  --sterling:#B5C2B9;      /* secondary text on dark */
  --rule:#C9D0D8;          /* ledger lines and ticks, decorative only */
  --mist:#F5F2EA;          /* light surfaces, page canvas */

  /* Supporting values used in the Brand Book applications */
  --white:#FFFFFF;
  --text:#10261C;
  --muted:#58635C;         /* secondary text on light (5.0:1 on mist) */
  --hairline:#E3DED2;      /* borders on light */
  --tint:#E8F1EB;          /* selected row fill */
  --sage-hover:#E2C589;    /* Sage button hover, still 9:1 with navy text */
  --navy-hover:#0A5233;
  --error:#C8372D;         /* form errors only, never in the logo */
  --on-dark-text:#E2E8E3;  /* body text on navy (13:1) */
  --on-dark-line:rgba(255,255,255,.12);
  --on-dark-ghost:rgba(255,255,255,.35);
  --on-dark-hover:rgba(255,255,255,.08);
  --head-light:rgba(255,255,255,.9);
  --mask-solid:#000;       /* mask gradients only, not a visible colour */
  --surface-2:#EEEADF;     /* neutral pill, app chrome */
  --track:#E5E0D4;         /* utilisation bar track */
  --navy-tint:#E6EBE5;
  --code-text:#DCE2EA;     /* 12.6:1 on navy-deep */
  --code-dim:#A9B3BF;      /* 8.4:1 on navy-deep */
  --code-key:#6FC29B;      /* 8.6:1 on navy-deep */
  --wordmark-ink:#0A5233;  /* giant footer wordmark letters, decorative */

  /* Calls to action (palettes can override these) */
  --cta-bg:var(--navy);             /* primary button on light surfaces */
  --cta-bg-hover:var(--navy-hover);
  --cta-text:var(--white);
  --cta-dark-bg:var(--sage);        /* primary button on navy surfaces */
  --cta-dark-bg-hover:var(--sage-hover);
  --cta-dark-text:var(--navy);
  --accent-dark:var(--sage);        /* markers, links and focus on navy */

  /* Type */
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --track-display:-0.035em;
  --track-head:-0.025em;
  --fs-body:17px;
  --fs-body-sm:16px;
  --fs-small:14px;
  --fs-xs:13px;
  --fs-h1:clamp(40px,5.6vw,72px);
  --fs-h1-hero:clamp(42px,6vw,80px);
  --fs-app:13px;
  --fs-h1-page:clamp(38px,5vw,60px);
  --fs-h1-legal:clamp(34px,4.4vw,52px);
  --fs-h2:clamp(30px,3.6vw,44px);
  --fs-h2-feature:28px;
  --fs-h2-prose:26px;
  --fs-h3:20px;
  --fs-lede:clamp(18px,1.6vw,21px);
  --fs-step:44px;

  /* Radii: the selected cell is never rounded */
  --r-cell:0;
  --r-sm:8px;
  --r-md:10px;
  --r-lg:14px;

  /* Shadows */
  --shadow-card:0 30px 60px -30px rgba(14,31,58,.4);
  --shadow-lift:0 18px 30px -16px rgba(14,31,58,.55);
  --shadow-dark-card:0 30px 60px -24px rgba(0,0,0,.45);
  --shadow-app:0 1px 0 rgba(14,31,58,.04),0 40px 80px -40px rgba(14,31,58,.45);
  --r-app:12px;
  --shadow-head:0 10px 24px -18px rgba(14,31,58,.45);
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --dur-reveal:.65s;
  --subnav-h:50px;
  /* Hero road */
  --road-line:rgba(255,255,255,.13);
  --road-line-dim:rgba(255,255,255,.07);
  --road-row:56px;           /* one ledger row */
  --road-col:120px;          /* one ledger column */
  --road-speed:28s;          /* time to travel 20 rows; slower is calmer */

  /* Selected-cell pattern */
  --cell-border:2px;
  --handle:7px;

  /* Layout and spacing */
  --wrap:1240px;
  --gut:clamp(20px,5vw,40px);
  --head-h:72px;
  --logo-h:34px;
  --sp-section:clamp(64px,9vw,120px);
  --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px; --sp-7:72px; --sp-8:96px;
  --row-h:44px;
  --hero-overlap:clamp(80px,12vw,180px);
  --motion-step:.4s;
}