/* Trees for Scouts design tokens.
   Concatenated verbatim from the design system's tokens/ directory:
   colors.css, typography.css, spacing.css, effects.css, base.css.
   fonts.css is NOT included — the Google Fonts @import blocks rendering;
   the faces are enqueued as a stylesheet in functions.php instead.
   Do not hand-edit: re-concatenate from the kit when the kit changes. */

/* ---------- tokens/colors.css ---------- */
:root {
  /* --- Ink & paper: warm neutrals, low chroma --- */
  --paper: oklch(0.968 0.012 88);          /* newsprint cream, default page */
  --paper-2: oklch(0.941 0.016 86);        /* recessed / alternating band */
  --paper-3: oklch(0.905 0.018 84);        /* rules, hairlines on paper */
  --ink: oklch(0.238 0.018 150);           /* body text, near-black w/ green cast */
  --ink-2: oklch(0.436 0.014 150);         /* secondary text */
  --ink-3: oklch(0.596 0.012 150);         /* captions, disabled */

  /* --- Brand greens --- */
  --fir: oklch(0.34 0.06 152);             /* PRIMARY. Douglas fir */
  --fir-deep: oklch(0.256 0.05 152);       /* pressed / footer ground */
  --fir-mid: oklch(0.452 0.062 152);       /* hover on fir surfaces */
  --fir-wash: oklch(0.93 0.028 152);       /* tinted surface on paper */
  --moss: oklch(0.60 0.075 138);           /* supporting green, charts/maps */

  /* --- Accents (shared chroma 0.12, lightness 0.72) --- */
  --gold: oklch(0.72 0.12 82);             /* primary accent. Tag/star/highlight */
  --clay: oklch(0.72 0.12 42);             /* secondary accent, sparing */
  --rust: oklch(0.52 0.13 34);             /* deep accent for signage + links-on-dark */

  /* --- Semantic --- */
  --ok: oklch(0.52 0.09 150);
  --warn: oklch(0.68 0.13 70);
  --err: oklch(0.50 0.15 28);
  --info: oklch(0.52 0.07 232);

  /* --- Aliases --- */
  --bg-page: var(--paper);
  --bg-band: var(--paper-2);
  --bg-inverse: var(--fir);
  --bg-inverse-deep: var(--fir-deep);
  --surface-card: oklch(0.988 0.008 88);
  --surface-tint: var(--fir-wash);
  --text-body: var(--ink);
  --text-muted: var(--ink-2);
  --text-faint: var(--ink-3);
  --text-on-inverse: oklch(0.972 0.014 88);
  --text-on-inverse-muted: oklch(0.855 0.024 120);
  --text-link: var(--fir);
  --text-link-hover: var(--rust);
  --border-hair: var(--paper-3);
  --border-strong: var(--ink);
  --border-rule: color-mix(in oklab, var(--ink) 22%, transparent);
  --focus-ring: var(--gold);
}

/* ---------- tokens/typography.css ---------- */
:root {
  --font-display: "Petrona", "Iowan Old Style", Georgia, serif;
  --font-body: "Petrona", Georgia, serif;
  --font-ui: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Scale — 1.25 major third, 16px base */
  --fs-3xs: 0.6875rem;  /* 11px  legal, map labels */
  --fs-2xs: 0.75rem;    /* 12px  eyebrow, meta */
  --fs-xs: 0.8125rem;   /* 13px  UI small */
  --fs-sm: 0.9375rem;   /* 15px  UI default */
  --fs-md: 1.0625rem;   /* 17px  body */
  --fs-lg: 1.25rem;     /* 20px  lead body */
  --fs-xl: 1.5rem;      /* 24px  card title */
  --fs-2xl: 1.875rem;   /* 30px  section head */
  --fs-3xl: 2.5rem;     /* 40px  page head */
  --fs-4xl: 3.25rem;    /* 52px  hero */
  --fs-5xl: 4.5rem;     /* 72px  sign / poster */
  --fs-6xl: 6.5rem;     /* 104px yard sign */

  --lh-tight: 1.02;
  --lh-head: 1.1;
  --lh-snug: 1.35;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.04em;
  --ls-eyebrow: 0.16em;   /* Space Grotesk caps eyebrows */

  --fw-reg: 400;
  --fw-med: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 800;
}

/* ---------- tokens/spacing.css ---------- */
:root {
  /* 4px base, print-friendly */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --gutter: var(--s-5);
  --page-pad: var(--s-5);
  --measure: 68ch;          /* max body line length */
  --container: 1180px;
  --container-narrow: 720px;
  --section-y: var(--s-9);
}

/* ---------- tokens/effects.css ---------- */
:root {
  /* Corners: near-square. Printed matter, not app chrome. */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* Borders: the primary separation device */
  --bw-hair: 1px;
  --bw-rule: 2px;
  --bw-heavy: 3px;

  /* Shadows: rare and hard, like offset ink. No soft blurs. */
  --shadow-none: none;
  --shadow-print: 3px 3px 0 var(--ink);
  --shadow-print-gold: 4px 4px 0 var(--gold);
  --shadow-lift: 0 1px 2px color-mix(in oklab, var(--ink) 12%, transparent);
  --shadow-overlay: 0 12px 32px color-mix(in oklab, var(--ink) 22%, transparent);

  /* Motion: short, no bounce */
  --dur-fast: 90ms;
  --dur: 160ms;
  --dur-slow: 260ms;
  --ease: cubic-bezier(0.2, 0, 0.3, 1);

  /* Texture: paper tooth. Reusable as a background-image value. */
  --tex-tooth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
  --tex-rule-hatch: repeating-linear-gradient(-45deg, color-mix(in oklab, var(--ink) 14%, transparent) 0 1px, transparent 1px 6px);
}

/* ---------- tokens/base.css ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

a {
  color: var(--text-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--text-link-hover); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

::selection { background: var(--gold); color: var(--ink); }

/* Eyebrow / label utility — the one recurring type treatment worth a class. */
.tfs-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

@media print {
  body { background: #fff; }
  a { text-decoration: none; color: inherit; }
}