/* ==========================================================================
   tokens.css — the single source of truth for visual style.
   See 04-design-notes/DESIGN-DIRECTION.md. Two layers:
     1. RAW palette + scales (the brand's actual values).
     2. SEMANTIC aliases that components consume (--bg, --fg, --brand, …).
   The dual-ground system works by re-defining the semantic aliases on a
   ground class (.ground-paper / .ground-spore), so every component is written
   ONCE and looks right on both the light and dark grounds. No component should
   reference a raw hex — only the semantic tokens below.
   ========================================================================== */

:root {
  /* ---- 1. RAW palette ------------------------------------------------ */
  --paper: #f3efe6;          /* warm bone — the light reading ground       */
  --paper-2: #ece7db;        /* inset / slightly recessed on paper         */
  --paper-surface: #fbf9f3;  /* lifted card surface on paper               */
  --spore: #14201a;          /* deep near-black green — the dark ground    */
  --spore-2: #1b2a22;        /* raised surface on spore                    */
  --spore-deep: #0e1612;     /* deeper SOLID base for the footer (no texture) */

  --ink: #1c211c;            /* warm near-black text (never pure #000)      */
  --ink-soft: #454b41;       /* secondary text on paper                    */
  --ink-muted: #5f665a;      /* captions, meta, eyebrow labels on paper (WCAG AA) */

  --myco: #2f5d43;           /* deep forest green — primary brand           */
  --myco-strong: #234a35;    /* darker forest — hover / emphasis            */
  --myco-tint: #e7eee6;      /* very light green — note boxes on paper      */
  --mist: #dfe6dd;           /* faint cool-green tint — dividers / chips     */

  --honey: #c9882d;          /* warm amber — doses + key CTAs ONLY (sparingly) */
  --honey-text: #8a5d12;     /* deep amber — small accent TEXT on paper (WCAG AA) */
  --honey-soft: #f0e2c6;     /* light amber wash                            */

  --line-paper: #d9d3c6;     /* hairline on paper                          */

  /* on-spore variants, lifted for WCAG AA contrast on the dark ground */
  --paper-on-spore: #eaf0e7;
  --paper-on-spore-soft: #c3ccc0;
  --paper-on-spore-muted: #98a196;
  --line-spore: rgba(234, 240, 231, 0.16);
  --honey-on-spore: #e0a23e;
  --myco-on-spore: #7fb394;

  --focus: #2e8b66;          /* focus ring — visible on both grounds (WCAG AA) */

  /* ---- 2. SEMANTIC aliases (defaults = the light paper ground) ------- */
  --bg: var(--paper);
  --bg-inset: var(--paper-2);
  --surface: var(--paper-surface);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --fg-muted: var(--ink-muted);
  --rule: var(--line-paper);

  --brand: var(--myco);
  --brand-strong: var(--myco-strong);
  --accent: var(--honey);
  --accent-text: var(--honey-text);
  --accent-soft: var(--honey-soft);
  --selection-bg: rgba(201, 136, 45, 0.28); /* honey @ 28% — branded text selection (paper) */

  --card-bg: var(--paper-surface);
  --callout-bg: var(--myco-tint);
  --callout-rule: var(--myco);

  --btn-primary-bg: var(--myco);
  --btn-primary-fg: #ffffff;
  --btn-primary-bg-hover: var(--myco-strong);
  --btn-ghost-fg: var(--myco-strong);

  --focus-ring: var(--focus);

  /* ---- Type ---------------------------------------------------------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Newsreader", ui-serif, Georgia, Cambria, "Times New Roman",
    serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* fluid type scale (clamp = scales smoothly between mobile and desktop) */
  --step--1: clamp(0.83rem, 0.78rem + 0.2vw, 0.94rem);
  --step-0: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.44rem, 1.3rem + 0.9vw, 2rem);
  --step-3: clamp(1.73rem, 1.5rem + 1.4vw, 2.66rem);
  --step-4: clamp(2.07rem, 1.65rem + 2.3vw, 3.6rem);

  --leading-tight: 1.12;
  --leading-normal: 1.62;

  --tracking-display: -0.02em;
  --tracking-label: 0.16em;

  /* ---- Spacing scale (8pt) ------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* ---- Layout / shape ---------------------------------------------- */
  --content-max: 72rem;
  --measure: 38rem;
  --radius: 0.5rem;
  --radius-sm: 0.25rem;
  --radius-strip: 0.375rem;
  --shadow: 0 1px 2px rgba(20, 32, 26, 0.05), 0 10px 30px rgba(20, 32, 26, 0.06);

  /* Elevation scale (two-layer, low-opacity soft shadows): depth felt, not
     announced. Tinted with the spore ink (like --shadow) so it reads warm on
     paper; .ground-spore re-maps these to a black base below. */
  --shadow-rgb: 20, 32, 26;
  --elev-1: 0 1px 2px rgba(var(--shadow-rgb), 0.04), 0 2px 6px rgba(var(--shadow-rgb), 0.05);
  --elev-2: 0 1px 2px rgba(var(--shadow-rgb), 0.05), 0 6px 16px rgba(var(--shadow-rgb), 0.07);
  --elev-3: 0 2px 4px rgba(var(--shadow-rgb), 0.06), 0 14px 34px rgba(var(--shadow-rgb), 0.09);
  --edge-hi: inset 0 1px 0 rgba(255, 255, 255, 0.5); /* printed top edge-of-light on paper */

  /* ---- Motion ------------------------------------------------------- */
  --transition: 180ms ease;
  --reveal-dur: 600ms;
  --reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Micro-interaction motion: crisp + tight, so a hover reads like a detent, not a swoosh */
  --micro-dur: 170ms;
  --micro-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --lift: -2px;            /* the ONE shared hover-lift distance */
  --stagger-step: 55ms;    /* spec-row cascade interval          */
}

/* ==========================================================================
   GROUND CONTEXTS — re-map the semantic tokens, then paint the band.
   Drop one of these on a <section> to switch the whole subtree's palette.
   ========================================================================== */

.ground-paper {
  --bg: var(--paper);
  --bg-inset: var(--paper-2);
  --surface: var(--paper-surface);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --fg-muted: var(--ink-muted);
  --rule: var(--line-paper);
  --brand: var(--myco);
  --brand-strong: var(--myco-strong);
  --accent: var(--honey);
  --accent-text: var(--honey-text);
  --accent-soft: var(--honey-soft);
  --selection-bg: rgba(201, 136, 45, 0.28); /* honey @ 28% — branded selection (paper) */
  --card-bg: var(--paper-surface);
  --callout-bg: var(--myco-tint);
  --callout-rule: var(--myco);
  --btn-primary-bg: var(--myco);
  --btn-primary-fg: #ffffff;
  --btn-primary-bg-hover: var(--myco-strong);
  --btn-ghost-fg: var(--myco-strong);
  background-color: var(--bg);
  color: var(--fg);
  /* Resolution-independent paper grain: a tiny inline SVG fractal-noise tile,
     blended soft-light over the paper so it adds even "tooth" without darkening.
     Looks identical at every screen size (unlike a cover-scaled photo) and ships
     as inline code — no image request, nothing to convert to WebP. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='220'%20height='220'%20filter='url(%23g)'%20opacity='0.6'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  background-repeat: repeat;
  background-blend-mode: soft-light;
}

.ground-spore {
  --bg: var(--spore);
  --bg-inset: var(--spore-2);
  --surface: var(--spore-2);
  --fg: var(--paper-on-spore);
  --fg-soft: var(--paper-on-spore-soft);
  --fg-muted: var(--paper-on-spore-muted);
  --rule: var(--line-spore);
  --brand: var(--myco-on-spore);
  --brand-strong: var(--paper-on-spore);
  --accent: var(--honey-on-spore);
  --accent-text: var(--honey-on-spore);
  --accent-soft: rgba(224, 162, 62, 0.14);
  --selection-bg: rgba(224, 162, 62, 0.36); /* honey-on-spore @ 36% — branded selection (dark) */
  --card-bg: var(--spore-2);
  --callout-bg: rgba(234, 240, 231, 0.05);
  --callout-rule: var(--honey-on-spore);
  --btn-primary-bg: var(--honey-on-spore);
  --btn-primary-fg: var(--spore);
  --btn-primary-bg-hover: var(--honey);
  --btn-ghost-fg: var(--paper-on-spore);
  /* Elevation re-mapped for the dark ground: ink-tinted shadows vanish on
     near-black, so use a black base + a faint warm edge-light (never a glow). */
  --shadow-rgb: 0, 0, 0;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.2);
  --elev-2: 0 1px 2px rgba(0, 0, 0, 0.26), 0 6px 18px rgba(0, 0, 0, 0.3);
  --elev-3: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 38px rgba(0, 0, 0, 0.38);
  --edge-hi: inset 0 1px 0 rgba(234, 240, 231, 0.06);
  background-color: var(--bg);
  color: var(--fg);
  /* Faint mycelium texture under a near-opaque spore veil: depth, not a photo.
     Text sits above the background, so contrast is unaffected. ~18% texture shows. */
  background-image:
    linear-gradient(rgba(18, 28, 23, 0.82), rgba(18, 28, 23, 0.82)),
    url("/assets/img/brand/texture-mycelium-dark.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}