/* ============================================================================
   Field-guide design tokens — dark ("ink") ground.

   The site reads as an instrument at dusk rather than a printed page: a deep
   forest-ink background, light warm-neutral type, and sage/clay reserved for
   data and accents, where they now carry real signal instead of tinting the
   whole surface.

   Scale names are inherited from the light palette and kept deliberately:
   --sage-900 is still the *most contrasting* sage against the ground, --sage-50
   the least. On a dark ground that means 900 is lightest. Every component reads
   from here, and so does the JavaScript (see FG.readTokens in app.js), so this
   file is the only place color is defined.
   ============================================================================ */

:root {
  color-scheme: dark;

  /* --- Ground / surfaces (deep forest ink) --- */
  --paper:        #151814;   /* page background */
  --paper-2:      #1b1f19;   /* recessed areas, table header */
  --card:         #1c211a;   /* raised card surface */
  --card-2:       #232820;   /* lightest surface, hover */

  /* --- Ink, now light: warm off-white, never pure #fff --- */
  --ink:          #edefe8;
  --ink-soft:     #c4c9bc;
  --ink-muted:    #8f9789;
  --ink-faint:    #6b7365;

  /* --- Sage (primary; foliage greens, lifted to read on the dark ground) --- */
  --sage-900:     #dfe7cf;   /* text on a sage fill */
  --sage-700:     #b9c89d;   /* links / headings accent */
  --sage-600:     #a9bb8a;   /* primary action */
  --sage-500:     #93a774;
  --sage-300:     #7e9161;   /* chart + strip fills */
  --sage-100:     #3a4530;   /* badge / tag fills */
  --sage-50:      #262e1f;

  /* --- Clay / ochre (accent; highlights, rarities, the current month) --- */
  --clay-700:     #e0bb8c;   /* accent text */
  --clay-600:     #d2a870;
  --clay-500:     #c4955a;   /* accent marks */
  --clay-300:     #a87f4c;
  --clay-100:     #3b3221;   /* badge fill */

  /* --- Borders / rules --- */
  --line:         #333a2d;
  --line-soft:    #272d22;
  --line-strong:  #454e3c;

  /* --- Seasonal semantic colors (used in charts + badges) --- */
  --spring:       #8fa772;   /* sage green */
  --summer:       #6fb3d6;   /* lake blue */
  --fall:         #d2a870;   /* ochre */
  --winter:       #97a3b3;   /* slate */
  --resident:     #a29885;   /* warm gray */
  --rare:         #d97a5e;   /* terracotta — rarities pop */

  /* --- Functional --- */
  --good:         #8fa772;
  --warn:         #d2a870;
  --bad:          #d97a5e;
  --info:         #6fb3d6;

  /* --- Chart series (categorical) -------------------------------------------
     UI sage and clay are too close to use together as chart series: measured
     against this ground they sit at ΔE 10 for normal vision, under the floor of
     15, and ΔE 7 for deuteranopia. They read as one colour in a legend.

     These six are a separate, validated set — checked for the dark-mode
     lightness band, a chroma floor, adjacent-pair colour-vision separation, and
     contrast against --paper. Assign them in this fixed order and never cycle:
     the order is what keeps adjacent pairs distinguishable (green and amber are
     deliberately far apart). A seventh series has no safe slot — group the tail
     as "Other", or facet into small multiples. --------------------------------- */
  --series-1: #6da84a;   /* green     */
  --series-2: #3f92cf;   /* blue      */
  --series-3: #d15c34;   /* terracotta */
  --series-4: #9a6ec9;   /* violet    */
  --series-5: #b8811c;   /* amber     */
  --series-6: #189c8e;   /* teal      */

  /* --- Sequential ramp (magnitude; one hue, monotonic lightness) ---
     Runs from just above the ground up to a bright sage, so on this page more
     reads as brighter. The light-ground version of this ramp ran the other way. */
  --seq-0: #1e2419;
  --seq-1: #2f4226;
  --seq-2: #436034;
  --seq-3: #5b8043;
  --seq-4: #77a055;
  --seq-5: #9cc172;
  --seq-none: #20241d;   /* no data */

  /* --- Typography ---
     Archivo (a slightly condensed grotesque) carries headlines and figures;
     Inter carries body and UI; IBM Plex Mono carries banding codes and dates.
     No serif — headline weight and tracking do the work instead. */
  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif:   var(--font-sans);   /* legacy alias — kept so old markup still resolves */
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Display weights + tracking. Sans needs more weight and tighter tracking
     than the serif it replaced, or headlines read thin and loose. */
  --w-display: 600;
  --w-title:   600;
  --w-figure:  600;
  --tr-display: -0.035em;
  --tr-title:   -0.02em;
  --tr-figure:  -0.02em;

  /* Type scale — pulled down from the previous setting, which ran large and
     flat. Contrast now comes from the gap between figures and body, not size. */
  --t-xs:    0.72rem;
  --t-sm:    0.8125rem;
  --t-base:  0.9375rem;
  --t-md:    1.0rem;
  --t-lg:    1.3125rem;
  --t-xl:    1.625rem;
  --t-2xl:   2.0rem;
  --t-3xl:   2.5rem;
  --t-display: clamp(1.75rem, 3.2vw, 2.5rem);

  --leading-tight: 1.14;
  --leading-snug:  1.35;
  --leading-normal: 1.55;

  /* --- Spacing scale (4px base) --- */
  --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;

  /* --- Radii (restrained; field guides aren't bubbly) --- */
  --r-sm:  3px;
  --r-md:  5px;
  --r-lg:  8px;
  --r-pill: 999px;

  /* --- Elevation. On a dark ground, light doesn't cast a lighter shadow —
         depth comes from black plus a faint lifted edge. --- */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 2px 10px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 10px 34px rgba(0, 0, 0, 0.5);

  /* --- Translucent bar fill, matched to --paper (used by the sticky
         masthead and nav, which blur what scrolls beneath them) --- */
  --bar-bg: rgba(21, 24, 20, 0.9);

  /* --- Layout --- */
  --container: 1180px;
  --container-narrow: 880px;
}

/* Printing a dark page wastes ink and reads badly, so print flips the palette
   back to paper. Components read tokens, so this is all it takes. */
@media print {
  :root {
    color-scheme: light;
    --paper: #ffffff; --paper-2: #f4f2ec; --card: #ffffff; --card-2: #fafaf7;
    --ink: #1c1a17; --ink-soft: #45413a; --ink-muted: #6f6a5e; --ink-faint: #9a9488;
    --sage-900: #2f3b25; --sage-700: #44542f; --sage-600: #556a3a;
    --sage-500: #6d8350; --sage-300: #9aac7c; --sage-100: #d8e0c6; --sage-50: #ecf0e1;
    --clay-700: #9a6b39; --clay-600: #b07c44; --clay-500: #c4955a;
    --clay-300: #ddb888; --clay-100: #f0dfc4;
    --line: #cfc8ba; --line-soft: #e2ddd2; --line-strong: #b3ab9c;
    --bar-bg: #ffffff;
  }
}