/* ============================================================================
   THE colour constants — the single source of truth for every colour in the app.
   Nothing is hardcoded anywhere else: all CSS rules and every view reference
   these variables. To reskin, change them here and only here. Neutral by
   design — no warm/beige cast; the birds are the only colour.
   Loaded first, before panel.css/application.css and in the standalone views.
   ============================================================================ */
:root {
  color-scheme: light;
  /* The publication's two typefaces — the single source of truth for type.
     --serif (EB Garamond, the Sabon role): names, mastheads, prose.
     --mono  (IBM Plex Mono): every number + small label. Self-hosted via the Vite
     app entry (@fontsource); the stacks fall back to system serif/mono. */
  --serif: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --paper:    #ffffff;   /* pure white page/panel ground */
  --paper-2:  #f2f2f3;   /* neutral recessed track */
  --paper-3:  #e7e7ea;   /* neutral placeholder fill */
  --ink:      #17171a;   /* neutral near-black text/marks */
  --ink-2:    #3d3d42;   /* neutral dark grey (secondary) */
  --ink-soft: #8b8b91;   /* neutral muted grey (labels) */
  --accent:   #3d3d42;   /* neutral dark grey */
  --accent-2: #17171a;   /* near-black */
  --rule:     #e4e4e7;            /* THE soft rule: every hairline subdivision */
  --scrim:    rgba(0,0,0,0.32);   /* the wash behind an overlay/drawer */
  --pill:     #ffffff;            /* active-toggle sliding pill */
  --frame:      #201f1d;          /* neutral dark surround (panel/emulator) */
  --frame-face: #2c2c30;          /* moulding face of the station/kiosk frame */
  --frame-label:#8a8a90;          /* spec caption sitting on the dark frame */
  /* Semantic accents — status + BoCCI conservation (same in both themes) */
  --red:      #c0392b;   /* Red list / errors */
  --amber:    #d99a1c;   /* Amber list / warnings */
  --green:    #4a8c5a;   /* Green list / ok */
  /* Depth shadow recipes — replace flat 1px borders */
  --edge:    inset 0 0 0 1px rgba(255,255,255,0.55), 0 0 0 1px rgba(0,0,0,0.04);
  --edge-lg: inset 0 0 0 1px rgba(255,255,255,0.6), 0 0 0 1px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.06);
  --recess:  inset 0 1px 2px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(0,0,0,0.04);
  --raised:  inset 0 0 0 1px rgba(255,255,255,0.8), 0 0 0 1px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.07);

  /* ==========================================================================
     SCALE TOKENS — the non-colour half of the design system. Added so the SPA's
     vanilla-extract theme (app/javascript/ealta/design/theme.css.ts) binds to real
     CSS variables and NO component hardcodes a size, space or z-index. Theme-
     independent, so :root only (not repeated in dark). SPA-facing for now.
     ========================================================================== */

  /* Spacing ramp — one scale replaces scattered ad-hoc gap/padding numbers. */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;

  /* Serif (EB Garamond) editorial/display scale — EB Garamond runs small, so body
     sits at 19px for comfortable unzoomed reading (brief §4.1). */
  --fs-3xl: 3rem;       /* 48 — journal lead headline / hero */
  --fs-2xl: 2.25rem;    /* 36 — major headline */
  --fs-xl:  1.75rem;    /* 28 — headline */
  --fs-lg:  1.375rem;   /* 22 — subhead / section head */
  --fs-md:  1.1875rem;  /* 19 — body prose */
  --fs-sm:  1.0625rem;  /* 17 — small body */
  --fs-base:1rem;       /* 16 */
  --fs-xs:  0.875rem;   /* 14 — fine print, bibliography entries, captions in prose */

  /* Mono (IBM Plex Mono) utility scale — small, but not anaemic (brief §4.1). */
  --ms-lg: 0.875rem;    /* 14 — emphasised count */
  --ms-md: 0.75rem;     /* 12 — standard label */
  --ms-sm: 0.6875rem;   /* 11 — micro label */
  --ms-xs: 0.625rem;    /* 10 — smallest caption */

  /* Line heights + label tracking. */
  --lh-tight: 1.1;  --lh-snug: 1.25;  --lh-normal: 1.5;  --lh-relaxed: 1.65;
  --ls-label: 0.08em;  --ls-caps: 0.14em;
  /* The wordmark's own slight positive tracking, and the drop cap's cap-height, both of which
     are typographic decisions rather than layout: they belong here, not in a component. */
  --ls-word: 0.01em;   --fs-dropcap: 3.1em;

  /* Measure — line length for prose columns. */
  --measure-narrow: 24rem;  --measure-prose: 34rem;  --measure-wide: 42rem;

  /* Recurring marks — sized ONCE, because each had drifted across modules: the line-icon
     beside a reading (15/18/19px), the status/conservation dot (7/8/9px) and the underline
     offset (2/3/4/5px). Two underline roles are kept because they are optically different:
     a link inside running prose sits tight, a marked control or name needs to clear
     descenders. */
  --icon:      15px;  /* a muted line-icon beside a reading */
  --icon-lg:   18px;  /* the follow mark — a control, so a larger target */
  --dot:       8px;   /* status + conservation dots */
  --uline-prose: 2px;
  --uline-mark:  4px;

  /* Corners — the idiom is square; pills are the deliberate exception. */
  --radius-none: 0;  --radius-sm: 2px;  --radius-pill: 999px;

  /* Control heights — deliberate, usable targets (brief §4.1). */
  --ctrl-sm: 30px;  --ctrl-md: 36px;  --ctrl-lg: 44px;

  /* Layout envelope — desktop uses more of the width (brief §4.1). */
  --page-max: 1200px;  --page-gutter: 24px;  --mast-h: 54px;

  /* Motion. */
  --dur-fast: 120ms;  --dur-med: 240ms;

  /* Z-index — MONOTONIC, replacing the ad-hoc 50/42/44/43 sticky stack on Live. */
  --z-base: 1;  --z-sticky: 100;  --z-overlay: 200;  --z-modal: 210;
}

/* Charcoal dark theme — set via data-theme="dark" on <html>. Variable-driven, so
   flipping ink<->paper inverts the whole UI cleanly. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:    #17181c;   /* charcoal page bg */
  --paper-2:  #212226;   /* recessed track */
  --paper-3:  #2c2d33;   /* placeholder fill */
  --ink:      #ededee;   /* neutral off-white text/marks */
  --ink-2:    #b4b4b8;   /* secondary text */
  --ink-soft: #828287;   /* muted text */
  --accent:   #d6d6d8;   /* light neutral — pills read light-on-dark */
  --accent-2: #ededee;
  --rule:     #34353a;
  --scrim:    rgba(0,0,0,0.55);
  --pill:     #3a3e48;
  --frame:    #0e0e10;
  --edge:    inset 0 0 0 1px rgba(255,255,255,0.05), 0 0 0 1px rgba(0,0,0,0.4);
  --edge-lg: inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 0 1px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.5);
  --recess:  inset 0 1px 2px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.04);
  --raised:  inset 0 0 0 1px rgba(255,255,255,0.07), 0 0 0 1px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.5);
}