/* Every value the objects use (DESIGN.md §2–§4). The same palette, families
   and spacing steps as the Noord-Holland map (datacenters-map
   src/nh/styles/nh.css), so the site and the map read as one. */
@layer tokens {
  :root {
    /* §2.1 palette */
    --color-ink: #141415;
    --color-text: #27272a;
    --color-graphite: #3c3c3e;
    --color-muted: #4e4e55;
    --color-subtle: #78787d;
    --color-line: #cacace;
    --color-surface-2: #e9e9ec;
    --color-surface: #f4f4f6;
    --color-paper: #ffffff;
    --color-sand: #efebe7;
    --color-lime: #defb4b;
    --color-orange: #ea8c47;
    --color-forest: #285c52;
    --color-forest-dark: #224e45;
    --color-mint: #daece8;

    /* §2.3 semantic roles */
    --color-action: var(--color-lime);
    --color-positive: var(--color-forest);
    --color-positive-surface: var(--color-mint);
    --color-negative: #b42318;
    --color-negative-surface: #fde7e5;

    /* §3.1 families */
    --font-display: "VC Henrietta", Georgia, serif;
    --font-text: "Onest", system-ui, sans-serif;

    /* §3.2 scale: mobile steps first, larger ones from the site's breakpoints below */
    --text-display-xl: 48px;
    --leading-display-xl: 56px;
    --text-display-l: 32px;
    --leading-display-l: 40px;
    --text-display-m: 24px;
    --leading-display-m: 32px;
    --text-title: 20px;
    --leading-title: 28px;
    --text-lead: 18px;
    --leading-lead: 26px;
    --text-body: 16px;
    --leading-body: 24px;
    --text-small: 14px;
    --leading-small: 20px;
    --text-eyebrow: 12px;
    --leading-eyebrow: 18px;
    --tracking-eyebrow: 0.2em;

    /* §4.1 spacing steps */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 64px;
    --space-10: 80px;
    --space-11: 160px;

    /* §4.2 radius; the feature corner shrinks with the viewport so it still
       reads as one corner at 360 px */
    --radius-xs: 2px;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 24px;
    --radius-feature: clamp(48px, 16vw, 160px);

    /* §4.3 layout */
    --width-content: 1200px;
    --width-reading: 720px;
    --gutter: var(--space-4);
    --section-gap: var(--space-8);

    /* §4.4 lines; focus */
    --hairline: 1px solid var(--color-line);
    --rule: 1px solid var(--color-text);
    --focus-outline: 2px solid var(--color-text);
    --control-height: 40px;

    /* The map iframe: tall enough to explore, short enough to scroll past */
    --map-height: max(420px, 72svh);
  }

  /* Tablet (the site's 810 px step) */
  @media (min-width: 810px) {
    :root {
      --text-display-xl: 64px;
      --leading-display-xl: 72px;
      --text-display-l: 40px;
      --leading-display-l: 48px;
      --text-display-m: 28px;
      --leading-display-m: 36px;
      --gutter: var(--space-6);
      --section-gap: var(--space-9);
      --map-height: min(80svh, 760px);
    }
  }

  /* Desktop (the site's 1200 px step) */
  @media (min-width: 1200px) {
    :root {
      --text-display-xl: 80px;
      --leading-display-xl: 88px;
      --text-display-l: 48px;
      --leading-display-l: 56px;
      --text-display-m: 32px;
      --leading-display-m: 40px;
    }
  }
}