/* 51 North — design tokens (single source for the website).
   Values are locked; mirror of brand/design-system/project/tokens.json.
   Contrast ratios noted are WCAG 2 against the named ground. */

:root {
  color-scheme: light;

  /* Grounds */
  --bone: #F4F0E8;          /* page ground */
  --bone-2: #ECE5D6;        /* raised / alternate section ground */
  --spruce: #16332E;        /* deep brand ground for dark bands, footer */
  --spruce-2: #214A40;      /* hover / secondary dark surface */

  /* Ink */
  --ink: #1A1A1A;           /* body text on bone (15.3:1) */
  --muted: #5B5A53;         /* secondary text on bone (6.1:1), bone-2 (5.5:1) */
  --on-spruce: #F4F0E8;     /* text on spruce (11.9:1) */
  --on-spruce-muted: #AEBFB8; /* secondary text on spruce (7.1:1) */

  /* Brand accents — decorative values (marks, rules, fills) */
  --wheat: #C8A14B;         /* latitude line, ticks, marks. NOT text on bone (2.1:1); OK as text on spruce (5.6:1) */
  --amber: #E08A3C;         /* the ONE action colour: primary button fill. Text on it = spruce (5.1:1) */
  --water: #6E93A6;         /* lake fills, map water. Not text on bone (2.9:1) */
  --water-2: #A7C2CC;       /* light water tint; text on spruce OK (7.3:1) */

  /* Text-safe accent variants (on bone) */
  --wheat-ink: #7A5C1A;     /* eyebrow labels, small data on bone (5.5:1) */
  --amber-ink: #9D4F1F;     /* inline links on bone (5.2:1), bone-2 (4.7:1) */
  --water-ink: #3F6470;     /* map labels, captions on bone (5.7:1) */

  /* Lines */
  --line: rgba(26, 26, 26, 0.14);      /* hairlines on bone */
  --line-on-spruce: rgba(244, 240, 232, 0.18);
  --focus: #16332E;         /* focus ring on light grounds (11.9:1 on bone) */
  --focus-on-spruce: #E08A3C; /* focus ring on spruce (5.1:1) */

  /* Type families */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;   /* headlines, pull-quotes */
  --font-data: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; /* coordinates, labels, numbers, nav */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* running text */

  /* Type scale (fluid) */
  --text-xs: 0.75rem;                                   /* 12px — legal, fine print */
  --text-sm: 0.875rem;                                  /* 14px — captions, labels */
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); /* 16–17px body */
  --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);/* lead paragraphs */
  --text-xl: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);       /* h3 */
  --text-2xl: clamp(2rem, 1.6rem + 1.8vw, 3rem);        /* h2 */
  --text-3xl: clamp(2.75rem, 1.9rem + 4vw, 5.25rem);    /* h1 / hero */
  --tracking-label: 0.10em;                             /* uppercase data labels (was 0.18em; tightened per design review) */

  /* Spacing (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-section: clamp(64px, 5vw + 40px, 128px);

  /* Radii — square, survey-plat feel */
  --radius-sm: 2px;   /* buttons, chips */
  --radius-md: 4px;   /* panels, photo slots */
  --radius-lg: 8px;   /* rare: large media only */

  /* Layout */
  --measure: 65ch;
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
}