/* Cairn design tokens — shared by cairn.observer and lab.cairn.observer.
   Canonical copy lives in the cairn repo (app/static/cairn-tokens.css); Lab vendors it verbatim.
   Direction: "PTT Sorting Office" — sorting-office structure, Crouwel paperwork. One mark: the
   numeral stamp (grid-built count on dot paper; a merged fix is a 45° corner bar, never over text).
   Grid paper only on mastheads, the pigeonhole frame, stamp faces and the routing-slip header.
   Fonts are self-hosted (never-CDN): each site declares @font-face for the family names below. */

:root {
  /* ---- type ---- */
  --font-display: "Tektur", "Hanken Grotesk", system-ui, sans-serif;  /* headings ≥20px only */
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;  /* identifiers only */
  --display-stretch: 88%;
  --display-weight: 700;
  --mono-stretch: 87.5%;
  --step--1: 0.8125rem;  /* 13px meta floor */
  --step-0: 1rem;        /* body */
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --leading-body: 1.55;
  --leading-tight: 1.15;
  --measure: 68ch;

  /* ---- space, shape ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius: 3px;
  --grid-cell: 16px;   /* line grid pitch (masthead, frame) */
  --dot-cell: 12px;    /* dot grid pitch (Lab masthead, stamp face) */
  --page-max: 1200px;

  /* ---- colour: light ---- */
  --ground: #F5F6F8; --panel: #FFFFFF; --sunk: #ECEEF2;
  --rule: #D9DDE3; --rule-strong: #A9B0BA;
  --ink: #121417; --ink-2: #3E444D; --ink-3: #596069;
  --link: #1F48FF;
  --focus: #1F48FF; --selection: #C9D4FF;

  /* event colours: open work needs a human (orange), PRs and fixes are blue */
  --open: #FF5A14; --open-text: #B5380A; --open-soft: #FFE7DC;
  --pr: #1F48FF; --pr-text: #1F48FF; --pr-soft: #E4E9FF;
  --fix: #1F48FF; --fix-text: #1F48FF; --fix-soft: #E4E9FF; --fix-band-ink: #FFFFFF;
  --attempt: #596069;

  /* Cairn masthead: paper with a blue line grid */
  --mast: #F5F6F8; --mast-ink: #121417; --mast-ink-2: #3E444D; --mast-edge: #1F48FF;
  --mast-img: linear-gradient(rgb(31 72 255 / .13) 1px, transparent 1px),
              linear-gradient(90deg, rgb(31 72 255 / .13) 1px, transparent 1px);
  --nav-hover: rgb(31 72 255 / .08); --nav-current: #121417; --nav-current-ink: #F5F6F8;

  /* Lab masthead: the Fodor ground, orange with pink dots */
  --lab-mast: #FF5A14; --lab-mast-ink: #121417; --lab-mast-ink-2: #2A160B;
  --lab-img: radial-gradient(circle, #FF7BC0 1.5px, transparent 1.8px);
  --lab-card: #FF5A14; --lab-card-ink: #121417;

  /* pigeonhole frame + stamp */
  --frame: #E3E7ED;
  --frame-img: linear-gradient(rgb(31 72 255 / .10) 1px, transparent 1px),
               linear-gradient(90deg, rgb(31 72 255 / .10) 1px, transparent 1px);
  --stamp-face: #FFFFFF; --stamp-dot: rgb(255 123 192 / .38);
  --stamp-ink: #121417; --stamp-edge: #121417;

  /* actions */
  --btn: #1F48FF; --btn-ink: #FFFFFF; --btn-hover: #1638D6;
  --start-bg: #121417; --start-ink: #F5F6F8; --start-ink-2: #C9CDD3;
  --copy-btn: #FF5A14; --copy-btn-ink: #121417;
  --next-bg: #FFE7DC;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #16171B; --panel: #1E2025; --sunk: #111216;
    --rule: #30333A; --rule-strong: #4C515A;
    --ink: #ECEDEF; --ink-2: #C3C7CE; --ink-3: #9BA1AA;
    --link: #93A8FF; --focus: #93A8FF; --selection: #2B3A80;
    --open: #FF7038; --open-text: #FF9466; --open-soft: #3A2117;
    --pr: #6B88FF; --pr-text: #93A8FF; --pr-soft: #1F2748;
    --fix: #6B88FF; --fix-text: #93A8FF; --fix-soft: #1F2748; --fix-band-ink: #0E1020;
    --attempt: #9BA1AA;
    --mast: #1B1D22; --mast-ink: #ECEDEF; --mast-ink-2: #C3C7CE; --mast-edge: #6B88FF;
    --mast-img: linear-gradient(rgb(107 136 255 / .16) 1px, transparent 1px),
                linear-gradient(90deg, rgb(107 136 255 / .16) 1px, transparent 1px);
    --nav-hover: rgb(107 136 255 / .14); --nav-current: #ECEDEF; --nav-current-ink: #16171B;
    --lab-mast: #F2621F; --lab-mast-ink: #121417; --lab-mast-ink-2: #2A160B;
    --lab-img: radial-gradient(circle, rgb(255 123 192 / .55) 1.5px, transparent 1.8px);
    --lab-card: #F2621F; --lab-card-ink: #121417;
    --frame: #0F1013;
    --frame-img: linear-gradient(rgb(107 136 255 / .10) 1px, transparent 1px),
                 linear-gradient(90deg, rgb(107 136 255 / .10) 1px, transparent 1px);
    --stamp-face: #1E2025; --stamp-dot: rgb(255 123 192 / .25);
    --stamp-ink: #ECEDEF; --stamp-edge: #C3C7CE;
    --btn: #3D5BFF; --btn-ink: #FFFFFF; --btn-hover: #5470FF;
    --start-bg: #ECEDEF; --start-ink: #121417; --start-ink-2: #3E444D;
    --copy-btn: #F2621F; --copy-btn-ink: #121417;
    --next-bg: #2A1C16;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #16171B; --panel: #1E2025; --sunk: #111216;
  --rule: #30333A; --rule-strong: #4C515A;
  --ink: #ECEDEF; --ink-2: #C3C7CE; --ink-3: #9BA1AA;
  --link: #93A8FF; --focus: #93A8FF; --selection: #2B3A80;
  --open: #FF7038; --open-text: #FF9466; --open-soft: #3A2117;
  --pr: #6B88FF; --pr-text: #93A8FF; --pr-soft: #1F2748;
  --fix: #6B88FF; --fix-text: #93A8FF; --fix-soft: #1F2748; --fix-band-ink: #0E1020;
  --attempt: #9BA1AA;
  --mast: #1B1D22; --mast-ink: #ECEDEF; --mast-ink-2: #C3C7CE; --mast-edge: #6B88FF;
  --mast-img: linear-gradient(rgb(107 136 255 / .16) 1px, transparent 1px),
              linear-gradient(90deg, rgb(107 136 255 / .16) 1px, transparent 1px);
  --nav-hover: rgb(107 136 255 / .14); --nav-current: #ECEDEF; --nav-current-ink: #16171B;
  --lab-mast: #F2621F; --lab-mast-ink: #121417; --lab-mast-ink-2: #2A160B;
  --lab-img: radial-gradient(circle, rgb(255 123 192 / .55) 1.5px, transparent 1.8px);
  --lab-card: #F2621F; --lab-card-ink: #121417;
  --frame: #0F1013;
  --frame-img: linear-gradient(rgb(107 136 255 / .10) 1px, transparent 1px),
               linear-gradient(90deg, rgb(107 136 255 / .10) 1px, transparent 1px);
  --stamp-face: #1E2025; --stamp-dot: rgb(255 123 192 / .25);
  --stamp-ink: #ECEDEF; --stamp-edge: #C3C7CE;
  --btn: #3D5BFF; --btn-ink: #FFFFFF; --btn-hover: #5470FF;
  --start-bg: #ECEDEF; --start-ink: #121417; --start-ink-2: #3E444D;
  --copy-btn: #F2621F; --copy-btn-ink: #121417;
  --next-bg: #2A1C16;
  color-scheme: dark;
}