/* ============================================================
   COMPONENTS — DESIGN TOKENS
   ------------------------------------------------------------
   Two layers, per GLOSSARY.md:

   1. TOKEN NAMES (vocabulary) — these match Mitchell's
      Style Guide v2 contract exactly, so anything built here
      speaks the same language as slipstream-sections. The
      contract names are grouped and labelled "[SGv2]" below.

   2. TOKEN VALUES (the skin) — come from a CAPTURED Style Preset,
      injected at the scope root by the renderer (render-contract.js).
      :root below holds ONLY the structural Foundation (spacing scale,
      container widths, motion, line-weight, focus) — never a baked
      "look". The skin is always a real captured preset, never a
      hand-authored default. (The earlier six hand-authored [data-theme]
      families were removed — generative + superseded by presets; the
      orphaned gallery that used them, assets/app.js, was retired.)

   Tokens marked "[lib]" are library-internal structural extras
   the component layer needs (shadows, hairlines, a fine spacing
   scale). They are NOT part of the SGv2 contract and must never
   leak into an emitted Slipstream section — the harness will
   enforce that later. Everything else is SGv2-native.
   ============================================================ */

:root {
  /* --- [lib] fine spacing scale for component internals ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;

  /* --- [lib] composite spacing — minimum acceptable density for cards, sections, fields.
     The Style Guide may scale these, but they must never resolve to nothing. --------- */
  --spacing-card:    var(--space-lg);    /* internal card padding */
  --spacing-section: var(--space-2xl);   /* vertical section rhythm */
  --spacing-field:   var(--space-sm);    /* gap between form rows  */

  /* --- [lib] background-slot fallbacks — aligned to slipstream-prod Style-Guide v2
     (page / alt / emphasis / inverse), same names + fallback values as their global.css.
     The Style Guide overrides these with brand-derived, WCAG-checked values. --- */
  --bg-page:     #ffffff;                         --text-on-page:     #1a1a1a;
  --bg-alt:      #f8fafc;                         --text-on-alt:      #1a1a1a;
  --bg-emphasis: var(--brand-primary, #1e7a3e);   --text-on-emphasis: #ffffff;
  --bg-inverse:  #0f172a;                         --text-on-inverse:  #ffffff;

  /* --- [lib] layout widths --------------------------------- */
  --container:       72rem;
  --container-wide:  84rem;
  --container-prose: 42rem;

  /* --- [lib] motion easing --------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- LIBRARY CHARACTER: line thickness ------------------- */
  /* A LIBRARY value (its "house" line weight) — NOT a per-client
     Style Guide knob. Delicate libraries ~1px; bolder ones 2-3px.
     This constancy across the whole kit is part of a library's
     identity. A teardown's captured border_width_px is what gets
     assigned here when seeding a new library; the reconstruction/
     showcase override these per teardown to preview that. */
  --line-width: 1px;        /* hairlines: cards, inputs, dividers */
  --btn-border-width: 2px;  /* button outline weight */

  /* Text-over-image legibility halo (Slipstream Principle #22): text sitting
     on a photo always gets a soft shadow so it stays readable. A library
     value — captured from a teardown's text-shadow when one is detected. */
  --text-over-image-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);

  /* More promoted library-character values (captured from teardowns). */
  --label-tracking: 0.07em;                         /* eyebrows / uppercase labels */
  --focus-ring: var(--brand-primary, #4f46e5);      /* keyboard-focus ring colour */
  --focus-ring-width: 2px;
  --focus-offset: 2px;
  --icon-stroke: 2;                                 /* line-icon stroke weight */
  /* --gradient-accent is injection-only (set when a teardown has one); falls back to solid */

  /* --- Semantic state colours (FUNCTIONAL Foundation defaults) -------------
     Canonical hues so an alert is never unstyled. A preset MAY override these
     with brand-nudged values (derive.js R("--color-*")) so states harmonise
     with the brand while staying legibly green/amber/red. These live in the
     Foundation (not a var() fallback) so the QA gate doesn't read them as a
     hardcoded skin literal — they are NAMED defaults, overridable per preset. */
  --color-success: #2e7d32;
  --color-warning: #b26a00;
  --color-danger:  #b3261e;

  /* --- Legibility scrims (text-over-image gradients; Principle #22) --------
     Dark by default for guaranteed AA contrast over any photo. A preset MAY
     override with a brand-tinted version (derive.js R("--scrim-*")) — the
     faintest brand hue in a near-black gradient. Named Foundation default. */
  --scrim-hero: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.60));
  --scrim-card: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0) 65%);

  /* --- [lib] structural neutrals (library-neutral; not skin paint) --------- */
  --btn-seam:     rgba(255,255,255,.22);  /* highlight seam between split-group buttons */
  --press-shadow: rgba(0,0,0,.22);        /* playful "pushable" button offset shadow tone */
}

/* Skin VALUES (brand, backgrounds, fonts, type, buttons, radius, spacing-section,
   shadows, line, links…) are supplied by the CAPTURED Style Preset the renderer injects
   at the scope root — NOT defined here. A preset is the skin; :root above is the Foundation. */