/* ==========================================================================
   CULTURE ATLAS — DESIGN TOKENS
   v1.0 · companion to DESIGN_SYSTEM.md

   This file is the single source of truth for color, type, spacing,
   radius, shadow, and motion across Culture Atlas. Every value here was
   extracted from the Discovery Canvas prototype rather than invented
   fresh — nothing in this file should visually change the Canvas when
   applied; its job is to make those same decisions reusable, named, and
   documented instead of buried inline in one HTML file.

   Do not hand-write hex/px values in component CSS once this file is in
   use — reference the token. If a needed value doesn't exist here yet,
   add it here first, with a name that describes its ROLE (--color-cta-bg)
   not its appearance (--color-orange).
   ========================================================================== */

:root{

  /* ---------------------------------------------------------------------
     COLOR — surfaces
     Two base surfaces only: ink (dark, cartographic-ink) and parchment
     (light, aged-paper). Every screen in the product is built from one
     of these two, never a third background color.
     --------------------------------------------------------------------- */
  --color-ink:            #1B2430;   /* primary dark surface */
  --color-ink-soft:       #26313F;   /* dark surface, one step lighter (hover states on ink) */
  --color-ink-line:       rgba(244,236,216,0.14); /* hairline dividers on ink */

  --color-parchment:      #F4ECD8;   /* primary light surface */
  --color-parchment-dark: #EDE1C8;   /* light surface, one step deeper (card-on-card on parchment) */
  --color-paper-line:     rgba(181,112,63,0.22);  /* hairline dividers on parchment */
  --color-paper-line-strong: rgba(181,112,63,0.4); /* emphasized hairline / active border on parchment */

  /* ---------------------------------------------------------------------
     COLOR — brand
     Ochre is locked (brand primary, do not adjust). Verdigris is the
     ONE accent reserved exclusively for Follow — it must never be used
     decoratively, or "followed" stops reading as a distinct state.
     --------------------------------------------------------------------- */
  --color-ochre:          #B5703F;   /* brand primary — locked */
  --color-ochre-light:    #D4934F;   /* brand primary, raised (hover / on-dark accents) */
  --color-verdigris:      #4A7A6D;   /* reserved: Follow (active) state only */

  /* ---------------------------------------------------------------------
     COLOR — text
     Each surface gets its own text + dimmed-text pair. Never use ink
     text tokens on the parchment surface or vice versa.
     --------------------------------------------------------------------- */
  --color-text-on-ink:        #F4ECD8;
  --color-text-on-ink-dim:    rgba(244,236,216,0.6);
  --color-text-on-parchment:      #2A2118;
  --color-text-on-parchment-dim:  rgba(42,33,24,0.58);
  /* Fixed (30 Jul 2026): dedicated tokens for surfaces that are ALWAYS
     dark ink regardless of [data-theme] — e.g. the map popup card
     (.leaflet-popup-content-wrapper, background:var(--color-ink) always).
     --color-text-on-ink/-dim get remapped under [data-theme="light"] for
     elements like .hero that intentionally flip their own background to
     parchment under light mode; the popup never flips its background, so
     it was inheriting a remap meant for a different surface and ending up
     with light-appropriate (dark) text on its still-dark background --
     "Continue Discovery" / "Return to Map" rendering as nearly invisible.
     Same literal values as the un-remapped ink tokens above, just never
     touched by the theme override. */
  --color-text-on-popup:      #F4ECD8;
  --color-text-on-popup-dim:  rgba(244,236,216,0.6);
  /* --tint-rgb (below) is also remapped under [data-theme="light"], for
     the same reason and with the same popup-specific problem: borders
     built from it on the always-dark popup would also go from a visible
     light tint to a barely-visible dark-on-dark tint under light theme. */
  --tint-rgb-on-popup: 244,236,216;
  --tint-rgb: 244,236,216; /* default (dark-mode) — matches the literal
    values every border/tint rule already used; [data-theme="light"]
    below redefines this to flip all of them to a light-appropriate tint. */

  /* ---------------------------------------------------------------------
     TYPEFACES
     Three roles, three families. Never substitute one for another's job.
     --------------------------------------------------------------------- */
  --font-display: 'Fraunces', serif;            /* headlines, section titles, entity titles */
  --font-body:    'Source Serif 4', Georgia, serif; /* body copy, descriptions, search input */
  --font-logo:    'Poppins', sans-serif;        /* "Culture Atlas" wordmark ONLY — never body or headline use */
  --font-mono:    'IBM Plex Mono', monospace;   /* eyebrows, labels, type tags, coordinates — always uppercase, tracked */

  /* ---------------------------------------------------------------------
     TYPE SCALE
     A named scale, not ad hoc sizes per component. clamp() steps are
     used wherever a size needs to respond between mobile and desktop.
     --------------------------------------------------------------------- */
  --fs-eyebrow:     11px;   /* mono, tracked, all-caps micro-labels */
  --fs-label:       12px;   /* toolbar links, meta text */
  --fs-body-sm:     12.5px; /* card descriptions, dense UI copy */
  --fs-body:        14.5px; /* default body copy */
  --fs-body-lg:     16px;   /* search input, chip-adjacent copy */
  --fs-card-title:  16px;   /* entity card titles */
  --fs-h3:          20px;   /* entity/reveal detail title */
  --fs-h2:          clamp(24px, 3.2vw, 32px);  /* section headings */
  --fs-h1:          clamp(27px, 4vw, 42px);    /* hero headline */
  --fs-display:     clamp(30px, 5vw, 50px);    /* reserved: largest editorial display use */

  --lh-tight:  1.2;
  --lh-body:   1.6;
  --lh-loose:  1.65;

  --tracking-mono: 0.09em;  /* standard letter-spacing for all mono/eyebrow text */

  /* ---------------------------------------------------------------------
     SPACING SCALE
     Not a strict 8px grid — a proven progression already load-bearing
     across the prototype. Use the token, not the raw pixel value.
     --------------------------------------------------------------------- */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  26px;
  --sp-4:  42px;
  --sp-5:  68px;
  --sp-6:  108px;

  /* ---------------------------------------------------------------------
     RADIUS
     Two families only. Sharp = the atlas/map-plate language (panels,
     cards, entity shells). Pill = the action language (anything you
     press or type into). Never mix — a card should never be pill-shaped,
     a button should never be sharp-cornered.
     --------------------------------------------------------------------- */
  --radius-sharp: 3px;
  --radius-pill:  999px;

  /* ---------------------------------------------------------------------
     ELEVATION
     Named by role, not by size, so intent survives if the pixel values
     are retuned later.
     --------------------------------------------------------------------- */
  --shadow-card-hover: 0 16px 30px -22px rgba(0,0,0,0.4);
  --shadow-cta:        0 14px 34px -16px rgba(181,112,63,0.55);
  --shadow-cta-hover:  0 18px 40px -14px rgba(181,112,63,0.65);
  --shadow-panel:      0 14px 30px -16px rgba(27,36,48,0.5);

  /* ---------------------------------------------------------------------
     MOTION
     Two easing curves cover the entire product:
       --ease-out  — for anything entering, expanding, or drawing in
       --ease-soft — for anything softer/ambient (color, opacity, fold)
     Three durations cover the entire product. If a fourth duration
     feels necessary, that's a signal to re-examine the interaction,
     not to add a token.
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  --t-fast: 180ms;   /* hover states, color/opacity micro-feedback */
  --t-base: 320ms;   /* standard transitions — buttons, chips, cards */
  --t-slow: 620ms;   /* panel reveals, layer transitions */

  /* Named durations for the Living Mark specifically — see
     DESIGN_SYSTEM.md § Motion for the full state spec. */
  --mark-assemble-duration: 1900ms;
  --mark-idle-interval-min: 4400ms;
  --mark-idle-interval-max: 6800ms;
  --mark-reveal-duration:   650ms;
  --mark-ripple-duration:   650ms;
  --mark-follow-duration:   450ms;
  --mark-ring-idle-spin:    48s;
  --mark-ring-reveal-spin:  3.2s;
}

/* ---------------------------------------------------------------------
   LIGHT-MODE TOKEN REDEFINITION
   The "never mix ink text on parchment" rule above (see COLOR — text)
   is enforced by every selector using the correct token for its own
   surface — but when [data-theme="light"] flips .hero and similar
   dark-surface elements onto a light background, every one of those
   ~20+ selectors still reads --color-text-on-ink, designed for a dark
   background. Rather than hunt down and override each selector
   individually (fragile, easy to miss one — as happened), redefining
   the TOKEN ITSELF here makes every one of them correct automatically,
   since var() re-resolves wherever it's used, all the way down. */
[data-theme="light"]{
  --color-text-on-ink: var(--color-text-on-parchment);
  --color-text-on-ink-dim: var(--color-text-on-parchment-dim);
  /* Every border/tint built as rgba(244,236,216, X) — cream at low
     opacity, meant to read as a subtle highlight on dark ink — becomes
     invisible on light. Rather than patch each of the 23 occurrences
     across page.css/components.css individually (found via a full
     sweep, same lesson as the canvas.js multi-crash bug earlier today),
     every one of them now references --tint-rgb instead of the literal
     numbers, so this one redefinition fixes all of them, and any new
     ones written the same way going forward too. */
  --tint-rgb: 23,18,15;
}