/* =====================================================================
   IDK — brand tokens (PROPOSED v0.1 · 2026-07-22)
   Source of truth: brand/DESIGN.md. Components read tokens; nothing
   re-declares a brand value. Status: interview draft — values lock
   section by section.
   ===================================================================== */

:root {
  /* ---- Palette · primary -------------------------------------------
     Atlantean direction (answered) grounded in color research: deep
     teal carries blue's trust/knowledge plus green's growth — the
     brand's stated axis — and is more distinctive than navy. Gold
     reads as earned value; it is punctuation, never paint. */
  --abyss:          #0A1A21;  /* the deep — dark surfaces, cover, reversed marks */
  --verdigris:      #3E8E7E;  /* oxidized bronze-green — interaction accent */
  --verdigris-deep: #2C6B60;  /* hover/pressed accent */
  --gold:           #C9A43B;  /* sunken gold — the period, primary emphasis */
  --gold-deep:      #8A6B1F;  /* gold on light surfaces — darkened to hold AA for small text */
  --biolume:        #7FE3D4;  /* bioluminescent cyan — focus & live states */

  /* ---- Palette · structural ---------------------------------------- */
  --lobby:          #EFF4F2;  /* base background — quiet in the lobby */
  --surface:        #E4ECE9;  /* raised panels on lobby */
  --surface-2:      #D8E3DF;  /* wells, table stripes */
  --deep-surface:   #10242C;  /* panels on abyss */
  --ink:            #14303A;  /* primary text on light */
  --ink-soft:       #33525D;  /* secondary text on light */
  --muted:          #4E6971;  /* captions, metadata on light */
  --foam:           #EAF2EF;  /* primary text on dark */
  --foam-soft:      #B9CCC8;  /* secondary text on dark */
  --rule:           #C9D6D2;  /* hairlines on light */
  --rule-dark:      #24404A;  /* hairlines on dark */

  /* ---- Gradient (one; allowed on dark showcase surfaces + cover only) */
  --gradient-descent: linear-gradient(180deg, #16323B 0%, #0A1A21 78%);

  /* ---- Typography --------------------------------------------------
     Serif display for the library's authority, readable body serif for
     the document, mono for code and marginalia. Pairing research:
     serif = tradition/authority; distinct roles create hierarchy. */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-display-b: 'Cormorant Garamond', 'Times New Roman', serif; /* encoded alternate */
  --font-body:    'Spectral', Georgia, serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --text-hero:    clamp(2.9rem, 6.5vw, 4.9rem);
  --text-h1:      clamp(2.1rem, 3.6vw, 3.1rem);
  --text-h2:      clamp(1.55rem, 2.6vw, 2.15rem);
  --text-h3:      1.35rem;
  --text-h4:      1.05rem;
  --text-body-lg: 1.19rem;
  --text-body:    1.0625rem;
  --text-body-sm: 0.9375rem;
  --text-caption: 0.8125rem;
  --text-label:   0.75rem;

  /* ---- Spacing (varied scale, not monotonic — inherited from the
          archive site's first draft, confirmed useful) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 14px;
  --sp-4: 22px;
  --sp-5: 36px;
  --sp-6: 56px;
  --sp-7: 88px;
  --sp-8: 132px;
  --section-pad: clamp(88px, 12vw, 160px);

  /* ---- Radii -------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Borders ------------------------------------------------------ */
  --border-w: 1px;
  --border: var(--border-w) solid var(--rule);

  /* ---- Shadows — "light through water": soft, cool, ambient.
          A shadow never defines an edge alone; borders anchor. */
  --sh-1: 0 1px 2px rgba(10, 26, 33, 0.06), 0 4px 14px rgba(10, 26, 33, 0.05);
  --sh-2: 0 2px 4px rgba(10, 26, 33, 0.07), 0 12px 32px rgba(10, 26, 33, 0.09);
  --sh-3: 0 4px 8px rgba(10, 26, 33, 0.08), 0 28px 64px rgba(10, 26, 33, 0.16);

  /* ---- Motion — tidal: slow, certain, never bouncy ------------------ */
  --dur-fast:   180ms;
  --dur-normal: 420ms;
  --dur-slow:   800ms;
  --ease-drift:   cubic-bezier(0.25, 0.6, 0.3, 1);   /* long settle — reveals */
  --ease-surface: cubic-bezier(0.22, 1, 0.36, 1);    /* interface feedback */
  --ease-tide:    cubic-bezier(0.6, 0, 0.3, 1);      /* position swaps */
  --stagger: 70ms;

  /* ---- Layout ------------------------------------------------------- */
  --max-w-narrow: 720px;
  --max-w:        1180px;
  --max-w-wide:   1420px;
  --nav-w:        236px;
  --nav-h:        56px;
}