/* ===================================================================
   FIELD GUIDE — DESIGN TOKENS
   This file is meant to be portable: drop it into future Field Guide
   screens/components as-is. Keep sandbox-only styling out of here —
   that lives in field-guide.css instead.
   =================================================================== */

:root {
  /* ---- Font families ---- */
  --font-ui: 'Public Sans', system-ui, sans-serif;
  --font-editorial: 'Source Serif 4', Georgia, serif;

  /* ---- UI scale (Public Sans) — sizes ---- */
  --ui-display-size: 3rem;      /* 48px */
  --ui-h1-size: 2rem;           /* 32px */
  --ui-h2-size: 1.5rem;         /* 24px */
  --ui-h3-size: 1.25rem;        /* 20px */
  --ui-h4-size: 1.125rem;       /* 18px */
  --ui-body-size: 1rem;         /* 16px */
  --ui-body-sm-size: 0.875rem;  /* 14px */
  --ui-caption-size: 0.75rem;   /* 12px */
  --ui-overline-size: 0.6875rem;/* 11px */
  --ui-data-value-size: 1.375rem; /* ~22px */
  --ui-data-label-size: 0.8125rem; /* 13px */
  --ui-button-size: 0.9375rem;  /* ~15px */

  /* ---- UI scale — weights ---- */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700; /* Public Sans 700 is already loaded (see the Google Fonts link); this just wires it up as a token */

  /* ---- Editorial scale (Source Serif 4) — sizes ---- */
  --ed-h1-size: 2.5rem;    /* 40px */
  --ed-h2-size: 1.75rem;   /* 28px */
  --ed-h3-size: 1.375rem;  /* 22px */
  --ed-lede-size: 1.25rem; /* 20px */
  --ed-body-size: 1.125rem;/* 18px */
  --ed-quote-size: 1.375rem; /* 22px */
  --ed-caption-size: 0.875rem; /* 14px */

  /* ---- Neutrals — warm-tinted ("field notebook paper"), not pure gray ----
     Reworked 2026-08-17: --color-ink lightened from near-black to a
     graphite/charcoal, redistributing --color-ink-secondary and
     --color-muted between the new ink and the (unchanged) --color-faint
     anchor, holding the ramp's hue (~87°, its existing warm cast) and its
     chroma trend constant in OKLCH — same method as the categorical/status
     palette. --color-faint, --color-hairline, and --color-surface-sunken
     are untouched; the math for the new steps happens to land faint
     exactly where it already was. See Reference doc for the full
     before/after table. */
  --color-ink: #34332f;
  --color-ink-hover: #1c1b18; /* the previous --color-ink, preserved for hover/emphasis use */
  --color-ink-secondary: #514e49;
  --color-muted: #6f6c65;
  --color-faint: #8f8b83;
  --color-faintest: #b5b1a9; /* between faint and hairline — world-map country boundaries, see Reference doc */
  --color-hairline: #ddd9d0;
  --color-surface: #fdfcfa;
  --color-surface-sunken: #f6f4ee;

  /* ---- Brand — retired 2026-08-17 ----
     Now that the masthead itself is filled with --color-ink (not a
     separate brand hue), a standalone teal identity color is redundant —
     ink already IS Field Guide's visual anchor. Aliased to ink/ink-hover
     rather than deleted, so anything still referencing --color-brand
     keeps working. This also frees the ~#1f4d5c/#163a46 hue neighborhood
     for other use (see the tier-palette proposal). */
  --color-brand: var(--color-ink);
  --color-brand-hover: var(--color-ink-hover);

  /* ---- Source identity — shape carries tier, color is a flat pool ----
     Reworked 2026-08-17: no agency gets a permanently reserved color,
     shape, or color+shape combination — not GBIF, not USGS, not WA
     State, not any future source. The per-agency tokens that used to
     live here (--color-source-usgs/-gbif/-state) stay deleted.

     — SHAPE is assigned by data provenance alone: square = National,
       diamond = State/Province, circle = County/Local. GBIF is treated
       as National tier for shape purposes (it operates at national/
       international scope), same mechanism as any other national source
       — no exception carved out for it. (No CSS token for shape — it's
       .tag-source-shape.is-square/-diamond/-circle in
       components/tag-source.css.)
     — COLOR is assigned dynamically from the flat, sequential 12-color
       pool below, in ingest/query order — 1st source seen gets Blue,
       2nd gets Orchid, and so on down the list as written here, wrapping
       or falling back to a generated hue past 12 concurrent sources
       (not yet specced). Never fixed to an agency: the same source can
       land on a different color across two different result sets if
       ingest order differs.

     Validated all-pairs (all 66 combinations among the 12, plus 36
     against the status palette below) under protanopia/deuteranopia
     simulation (OKLab ΔE), WCAG contrast against this file's own
     --color-surface (not a generic reference surface — an earlier check
     against a stand-in dark surface missed that Purple and Berry fell
     under 3:1 against this project's actual #201e1a, caught and fixed at
     ship time), in both themes: zero hard failures in either mode.
     Remaining close pairs sit in the 6.0–8.0 CVD ΔE warn band, mitigated
     by the mandatory shape+label pairing every source tag already
     uses — never color alone. Position 10 (Cyan) was chosen over an
     earlier Red candidate specifically to stay clear of
     --color-signal-negative's hue, which Red nearly matched. Full
     methodology, the rejected data-provenance-grouped structure, and
     the before/after validation data live in the archived Flat Source
     Palette exploration — see Reference doc Section 8.
  */
  --color-source-blue: #00638c;
  --color-source-orchid: #b24fce;
  --color-source-cornflower: #4591ff;
  --color-source-purple: #711bb2;
  --color-source-teal: #009997;
  --color-source-pink: #fc4e9f;
  --color-source-berry: #b9036b;
  --color-source-green: #009d64;
  --color-source-lilac: #d564d9;
  --color-source-cyan: #036a6c;
  --color-source-indigo: #4a77ff;
  --color-source-coral: #ff566e;

  /* ---- Reserved signal colors — fixed, shared scale ----
     Renamed from --color-status-* (see NAMING.md, "Reserved signal
     colors"): these four are a shared semantic resource, not owned by
     any one component. Three separate vocabularies read from them —
     colors.html's discrete Agreement/Low Confidence/Conflict/Missing
     states, Tag-confidence's Agree/Align/Diverge/Conflict relationship
     labels, and Tag-confidence's Low/Medium/High/Full/None percentage
     tiers — never reused for source identity or vice versa. Always
     paired with an icon/dot-meter + text label in the UI — two of the
     six pairs in this system (positive↔negative, caution↔negative) fail
     full colorblind hue-separation by design: red-vs-green and
     amber-vs-rust are both well-known CVD confusion axes that no hue
     choice escapes. Icon+label is the mitigation, not an afterthought —
     see colors.html for detail. */
  --color-signal-positive: #1f6318; /* confirmed across sources */
  --color-signal-caution: #b58a0c;  /* uncertain, unverified, or coarse */
  --color-signal-negative: #c93520; /* sources disagree — flagged, not hidden */
  --color-signal-absent: var(--color-faint); /* absent — colorless by design */

  --radius-tag: 3px;
  --radius-card: 4px;
  --radius-pill: 999px; /* fixed, not derived — large enough to fully round any pill height */

  /* ---- Spacing scale — linear, 4px/0.25rem base. Every step below is
     used somewhere in the current UI (not padded out to an abstract
     range). A handful of original ad hoc values (0.2rem, 0.35rem,
     0.4rem, 0.65rem, 0.85rem) didn't land exactly on a step and were
     rounded to the nearest one — 0.35rem rounded up rather than to its
     strict nearest neighbor (0.25rem read cramped in practice); see
     Reference doc for the full before/after table. */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-7: 2rem;     /* 32px */
  --space-8: 3rem;     /* 48px */
  --space-9: 3.5rem;   /* 56px */
  --space-10: 6rem;    /* 96px */

  /* ---- Border widths — kept literal px, not rem: border crispness is a
     pixel concern, independent of the type/spacing rhythm. ---- */
  --border-width-hairline: 1px; /* dividers, card/swatch/pill outlines */
  --border-width-active: 2px;   /* nav active-tab underline */
  --border-width-accent: 3px;   /* not currently applied by any real component — defined for a future accent-stripe treatment */
}

/* Dark values are declared twice by design: once guarded behind the OS
   media query (for visitors who haven't touched the toggle), once under
   an explicit [data-theme="dark"] stamp (for the toggle override, set by
   theme.js and persisted to localStorage). The :not([data-theme="light"])
   guard lets an explicit light choice beat a dark OS setting; the
   standalone [data-theme="dark"] block lets an explicit dark choice win
   even on a light-OS visitor. See theme.js. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-ink: #f5f3ee;
    --color-ink-hover: #ffffff; /* dark-mode direction of "more emphasis" is lighter, not darker */
    --color-ink-secondary: #c9c5ba;
    --color-muted: #9a968c;
    --color-faint: #726e65;
    --color-faintest: #55524b;
    --color-hairline: #3a3733;
    --color-surface: #201e1a;
    --color-surface-sunken: #171613;

    --color-brand: var(--color-ink);
    --color-brand-hover: var(--color-ink-hover);

    --color-source-blue: #006acf;
    --color-source-orchid: #b41ebb;
    --color-source-cornflower: #0099ff;
    --color-source-purple: #743dff;
    --color-source-teal: #0092a3;
    --color-source-pink: #ee44a6;
    --color-source-berry: #945483;
    --color-source-green: #2d845a;
    --color-source-lilac: #ae75d4;
    --color-source-cyan: #00bbcb;
    --color-source-indigo: #007cff;
    --color-source-coral: #c45c7b;

    --color-signal-positive: #3fa843;
    --color-signal-caution: #a67f0d;
    --color-signal-negative: #e14424;
    --color-signal-absent: var(--color-faint);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-ink: #f5f3ee;
  --color-ink-hover: #ffffff;
  --color-ink-secondary: #c9c5ba;
  --color-muted: #9a968c;
  --color-faint: #726e65;
  --color-faintest: #55524b;
  --color-hairline: #3a3733;
  --color-surface: #201e1a;
  --color-surface-sunken: #171613;

  --color-brand: var(--color-ink);
  --color-brand-hover: var(--color-ink-hover);

  --color-source-blue: #006acf;
  --color-source-orchid: #b41ebb;
  --color-source-cornflower: #0099ff;
  --color-source-purple: #743dff;
  --color-source-teal: #0092a3;
  --color-source-pink: #ee44a6;
  --color-source-berry: #945483;
  --color-source-green: #2d845a;
  --color-source-lilac: #ae75d4;
  --color-source-cyan: #00bbcb;
  --color-source-indigo: #007cff;
  --color-source-coral: #c45c7b;

  --color-signal-positive: #3fa843;
  --color-signal-caution: #a67f0d;
  --color-signal-negative: #e14424;
  --color-signal-absent: var(--color-faint);
}

/* ===================================================================
   UI SCALE — utility classes
   =================================================================== */

.text-display {
  font-family: var(--font-ui);
  font-size: var(--ui-display-size);
  font-weight: var(--w-semibold);
  line-height: 1.1;
}

.text-h1 {
  font-family: var(--font-ui);
  font-size: var(--ui-h1-size);
  font-weight: var(--w-semibold);
  line-height: 1.2;
}

.text-h2 {
  font-family: var(--font-ui);
  font-size: var(--ui-h2-size);
  font-weight: var(--w-semibold);
  line-height: 1.25;
}

.text-h3 {
  font-family: var(--font-ui);
  font-size: var(--ui-h3-size);
  font-weight: var(--w-semibold);
  line-height: 1.3;
}

.text-h4 {
  font-family: var(--font-ui);
  font-size: var(--ui-h4-size);
  font-weight: var(--w-medium);
  line-height: 1.35;
}

.text-body {
  font-family: var(--font-ui);
  font-size: var(--ui-body-size);
  font-weight: var(--w-regular);
  line-height: 1.5;
}

.text-body-sm {
  font-family: var(--font-ui);
  font-size: var(--ui-body-sm-size);
  font-weight: var(--w-regular);
  line-height: 1.5;
}

.text-caption {
  font-family: var(--font-ui);
  font-size: var(--ui-caption-size);
  font-weight: var(--w-regular);
  line-height: 1.4;
}

.text-overline {
  font-family: var(--font-ui);
  font-size: var(--ui-overline-size);
  font-weight: var(--w-semibold);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.text-data-value {
  font-family: var(--font-ui);
  font-size: var(--ui-data-value-size);
  font-weight: var(--w-semibold);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.text-data-label {
  font-family: var(--font-ui);
  font-size: var(--ui-data-label-size);
  font-weight: var(--w-medium);
  line-height: 1.3;
  color: var(--color-muted);
}

.text-button {
  font-family: var(--font-ui);
  font-size: var(--ui-button-size);
  font-weight: var(--w-semibold);
  line-height: 1;
}

/* ===================================================================
   EDITORIAL SCALE — utility classes
   =================================================================== */

.text-ed-h1 {
  font-family: var(--font-editorial);
  font-size: var(--ed-h1-size);
  font-weight: var(--w-semibold);
  line-height: 1.15;
}

.text-ed-h2 {
  font-family: var(--font-editorial);
  font-size: var(--ed-h2-size);
  font-weight: var(--w-semibold);
  line-height: 1.2;
}

.text-ed-h3 {
  font-family: var(--font-editorial);
  font-size: var(--ed-h3-size);
  font-weight: var(--w-semibold);
  line-height: 1.25;
}

.text-ed-lede {
  font-family: var(--font-editorial);
  font-size: var(--ed-lede-size);
  font-weight: var(--w-regular);
  line-height: 1.5;
}

.text-ed-body {
  font-family: var(--font-editorial);
  font-size: var(--ed-body-size);
  font-weight: var(--w-regular);
  line-height: 1.6;
}

.text-ed-quote {
  font-family: var(--font-editorial);
  font-size: var(--ed-quote-size);
  font-weight: var(--w-regular);
  font-style: italic;
  line-height: 1.4;
}

.text-ed-caption {
  font-family: var(--font-editorial);
  font-size: var(--ed-caption-size);
  font-weight: var(--w-regular);
  font-style: italic;
  line-height: 1.4;
}