/* ==========================================================================
   Plumbline — design tokens
   One accent. One type family. Two shadows. Nothing here is decorative.
   ========================================================================== */

:root {
  /* --- Surfaces ------------------------------------------------------- */
  --paper:          #F4F0E9;  /* page canvas, warm bone                   */
  --paper-raised:   #FBF9F5;  /* cards sitting on paper                   */
  --paper-sunk:     #EAE4DA;  /* inset strips, input wells                */
  --ink:            #16120F;  /* dark bands, warm charcoal                */
  --ink-raised:     #221C17;  /* cards sitting on ink                     */

  /* --- Interactive emphasis ------------------------------------------- */
  /* Safety orange. The only accent on the page. Max one per screen.      */
  --action:         #BE4117;
  --action-hi:      #E05A26;
  --action-sunk:    #A83A13;
  --action-tint:    #F6E3DA;

  /* Filled orange surfaces that carry white text or icons. Deliberately NOT
     re-pointed on ink: the lighter accent only clears 3.06:1 against white,
     which is fine for a rule and not fine for a button label. */
  --action-fill:    #BE4117;  /* white on this — 5.3:1 */
  --action-fill-hi: #A83A13;  /* hover darkens rather than lightens — 6.6:1 */
  --action-fill-lo: #8F3010;

  /* --- Text ----------------------------------------------------------- */
  --text:           #16120F;  /* on paper — 15.4:1                        */
  --text-sub:       #5C534B;  /* on paper — 7.1:1                         */
  --text-mute:      #6F655C;  /* on paper — 5.0:1, captions only          */
  --text-inv:       #F4F0E9;  /* on ink   — 15.4:1                        */
  --text-inv-sub:   #A9A09A;  /* on ink   — 6.2:1                         */

  /* --- Lines ---------------------------------------------------------- */
  --line:           #D8D0C4;
  --line-strong:    #8C8073;  /* component boundaries — 3.2:1 on paper */
  --line-inv:       #3A322B;

  /* --- Semantic. Validation only. Never decoration. ------------------- */
  --ok:             #2F6B3F;
  --warn:           #8A5A08;
  --err:            #A8281C;

  /* --- Type -----------------------------------------------------------
     Inter, two weights. 500 does every piece of display work, 400 does every
     piece of reading work, and the separation is carried by size and tracking
     instead of by weight. Nothing on the page is bolder than Medium.
     -------------------------------------------------------------------- */
  --font: "Inter", "Inter Fallback", system-ui, sans-serif;

  --wt-display: 500;
  /* Section titles only. One step up from the display weight: enough to
     read as headings at a glance, short of the hero's structural 700. */
  --wt-head:    600;
  --wt-text:    400;
  --wt-hero:    700;

  /* The hero keeps the size it had. At 128px, -0.07em tracking is the whole
     point of this face: the words close up into a single mass. */
  --fs-hero:    clamp(2.625rem, 0.1rem + 8.2vw, 8rem);
  --fs-display: clamp(2.375rem, 1.1rem + 3.55vw, 4rem);
  --fs-h1:      clamp(2.375rem, 1.1rem + 3.55vw, 4rem);
  /* Section titles top out at 64px — reached at 1440 and held from there. */
  --fs-h2:      clamp(2rem, 1.3rem + 3.3vw, 4rem);
  --fs-h3:      clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  --fs-lead:    clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-cap:     0.875rem;

  /* Tracking tightens as size grows — the whole character of this face. */
  --ls-hero: -0.07em;
  --ls-h1:   -0.07em;
  --ls-h2:   -0.06em;
  --ls-h3:   -0.05em;
  --ls-body: -0.04em;

  --lh-tight: 1.1;
  --lh-head:  1.2;
  --lh-body:  1.4;
  --measure:  62ch;

  /* --- Space ---------------------------------------------------------- */
  --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3:  0.75rem;  --s-4:  1rem;
  --s-6:  1.5rem;   --s-8:  2rem;     --s-12: 3rem;     --s-16: 4rem;
  --s-24: 6rem;     --s-32: 8rem;

  --section-y: clamp(4rem, 2rem + 7vw, 8rem);
  --gutter:    clamp(1.25rem, 0.5rem + 2.4vw, 2.5rem);
  --maxw:      1280px;

  /* --- Radii ---------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 16px;

  /* --- Shadows. Two. -------------------------------------------------- */
  --shadow-card:    0 1px 2px rgba(22,18,15,.05), 0 8px 24px -12px rgba(22,18,15,.16);
  --shadow-overlay: 0 2px 6px rgba(22,18,15,.08), 0 24px 60px -20px rgba(22,18,15,.34);

  /* --- Motion --------------------------------------------------------- */
  --ease-out:  cubic-bezier(.16,.84,.44,1);
  --ease-in-out: cubic-bezier(.62,.04,.34,1);
  --t-fast: 140ms;
  --t-mid:  280ms;
  --t-slow: 620ms;
}

/* Sections rendered on ink re-point the text tokens once, so every child
   component inherits correctly instead of overriding colour locally. */
.on-ink {
  --text:        var(--text-inv);
  --text-sub:    var(--text-inv-sub);
  --text-mute:   var(--text-inv-sub);
  --line:        var(--line-inv);
  --line-strong: #8A7F73;
  --paper:       var(--ink);
  --paper-raised: var(--ink-raised);
  --paper-sunk:  #100D0B;
  --action:      var(--action-hi);
  --action-hi:   #F06B33;
  color: var(--text-inv);
  background: var(--ink);
}