/* GRO design tokens ("Today", DESIGN_SYSTEM.md). The ONLY file with colours, sizes, spacing, radii, shadows, motion and
   fonts. Every other stylesheet uses these variables. Light is the default; dark applies only when the visitor picked it
   with the toggle (html[data-theme="dark"]). Never keyed on the system setting. */

/* Self-hosted fonts (latin). Poppins for headings and numbers, Atkinson Hyperlegible for body text. SIL OFL. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/poppins-latin-500.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/poppins-latin-600.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/poppins-latin-700.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/poppins-latin-800.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-latin-400.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/atkinson-latin-700.woff2) format('woff2'); }

:root {
  /* Brand (HHN navy, one teal accent) */
  --navy: #09315D;
  --navy-deep: #072747;
  --blue: #0F54AA;
  --blue-hover: #0B4489;
  --accent: #3BC1C6;
  --leaf: #A4D16D;
  --on-navy: #FFFFFF;
  --on-navy-2: #C9DAEA;
  --on-navy-hover: rgba(255, 255, 255, .1);
  --on-navy-line: rgba(255, 255, 255, .28);
  --on-blue: #FFFFFF;
  --white: #FFFFFF;

  /* Surfaces and text */
  --ink: #0B2440;
  --ink-2: #3A5068;
  --page: #F4F8FB;
  --surface: #FFFFFF;
  --surface-2: #E8F4FA;
  --line: #D3E0EA;
  --line-strong: #A9BED0;

  /* States: always paired with words and an icon, never colour alone */
  --late: #B42318;  --late-bg: #FDECEA;  --late-line: #E5483A;
  --today: #8A4B00; --today-bg: #FFF1DB; --today-line: #E08A00; --today-chip: #FFB547;
  --ok: #1D6B3B;    --ok-bg: #E6F4EA;    --ok-line: #2F8A50;  --on-ok: #FFFFFF;
  --paused: #4D5B6A; --paused-bg: #EEF1F4;
  --wait: #5B3E99;  --wait-bg: #F0EAFB;
  --warn: #7A5A00;  --warn-bg: #FFF7D6; --warn-line: #E3B505;

  /* Type */
  --font-head: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Atkinson Hyperlegible', 'Segoe UI', Verdana, sans-serif;
  --fs-min: 16px;
  --fs-body: 18px;
  --fs-lead: 20px;
  --fs-h3: 21px;
  --fs-job: 23px;
  --fs-h2: 26px;
  --fs-q: 30px;
  --fs-hero: clamp(30px, 4.2vw, 50px);
  --fs-hero-sm: clamp(28px, 3.4vw, 40px);
  --fs-num: clamp(44px, 5vw, 64px);
  --fs-num-md: 40px;
  --fs-num-sm: 24px;
  --fs-brand: 26px;
  --lh: 1.5;
  --lh-head: 1.2;

  /* Space (4 px scale) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* Shape */
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;
  --border: 1px; --border-2: 2px; --rail: 8px;

  /* Targets */
  --tap: 48px;
  --tap-done: 56px;
  --input-h: 56px;
  --input-sm: 52px;   /* smallest input (forms with many fields); the design rule floor */
  --icon: 24px;

  /* Layout */
  --w-page: 1240px;
  --w-list: 920px;
  --w-form: 720px;
  --w-sheet: 620px;
  --bar-h: 76px;
  --rail-w: 96px;
  --rail-w-sm: 78px;
  --journey-h: 8px;

  /* Depth */
  --shadow: 0 1px 0 rgba(9, 49, 93, .06), 0 2px 8px rgba(9, 49, 93, .06);
  --shadow-sheet: 0 -8px 40px rgba(7, 39, 71, .28);
  --scrim: rgba(7, 39, 71, .55);
  --focus: 0 0 0 3px var(--surface), 0 0 0 6px var(--blue);

  /* Motion (DESIGN_SYSTEM.md: motion explains a change; reduced-motion turns it off) */
  --t-fast: .15s;
  --t-med: .25s;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

html[data-theme="dark"] {
  --navy: #0A2A4E;
  --navy-deep: #061D37;
  --blue: #4C93E6;
  --blue-hover: #6AA8EE;
  --on-navy-2: #A9C2DA;
  --on-blue: #04172C;
  --ink: #EAF2FA;
  --ink-2: #A9BDD1;
  --page: #08182B;
  --surface: #0F243C;
  --surface-2: #14304F;
  --line: #22405F;
  --line-strong: #3B5F84;
  --late: #FF8F84;  --late-bg: #3A1716;  --late-line: #F0645A;
  --today: #FFC46B; --today-bg: #33240C; --today-line: #E8A23A;
  --ok: #7FD39C;    --ok-bg: #12301E;    --ok-line: #4FB277; --on-ok: #06200F;
  --paused: #A9B6C3; --paused-bg: #1A2B3D;
  --wait: #C9B5F5;  --wait-bg: #261C3D;
  --warn: #F3D36B;  --warn-bg: #2E2709; --warn-line: #C99E10;
  --shadow: 0 1px 0 rgba(0, 0, 0, .3);
  --scrim: rgba(0, 0, 0, .65);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-med: 0s; }
}