/* ============================================================
   KEMETRIX GLOBAL — DESIGN TOKENS
   Direction: "The Modern Institution of Kemet"
   Dark-first editorial luxury. Gold is a hairline, never a fill.
   ============================================================ */

:root {

  /* ---- Color · Ink (dark surfaces) ---- */
  --ink:        #0A0E0C;   /* obsidian green-black — page ground */
  --basalt:     #10160F;   /* deep basalt — section surface */
  --basalt-2:   #18201A;   /* elevated basalt — panels on dark */
  --basalt-3:   #212B24;   /* hover / highest dark elevation */

  /* ---- Color · Papyrus (warm ivory, whisper of sage) ---- */
  --papyrus:    #F0EEE1;
  --papyrus-2:  #E7E6D4;
  --papyrus-3:  #DCD9C4;

  /* ---- Color · Brand Olive accent (from the logo ink) ----
     --gold/--gold-deep are legacy NAMES now carrying the olive accent. */
  --gold:       #A6B98C;   /* luminous sage-olive — hairlines, eyebrows, numerals on dark */
  --gold-deep:  #3E4E36;   /* deep brand olive — accent on light surfaces */
  --gold-faint: rgba(166, 185, 140, 0.30);
  --olive:      #4C5A4A;
  --olive-soft: #E7EADD;

  /* ---- Color · Type ---- */
  --t-dark-1:   #ECE7D9;             /* primary on dark */
  --t-dark-2:   rgba(236,231,217,.64);
  --t-dark-3:   rgba(236,231,217,.40);
  --t-light-1:  #141A15;             /* primary on light */
  --t-light-2:  rgba(20,26,21,.66);
  --t-light-3:  rgba(20,26,21,.42);

  /* ---- Color · Tertiary ---- */
  --sage:       #74836F;

  /* ---- Hairlines ---- */
  --line-dark:  rgba(166,185,140,.20);  /* olive-toned on dark surfaces */
  --line-dark-strong: rgba(166,185,140,.42);
  --line-light: rgba(20,26,21,.16);     /* ink on light surfaces */
  --line-light-strong: rgba(20,26,21,.34);

  /* ---- Typography ---- */
  --f-display: "Fraunces", "Georgia", serif;
  --f-text:    "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Display settings: sharp, unsoftened, no wonk — institutional, not quaint */
  --display-settings: "SOFT" 0, "WONK" 0, "opsz" 144;

  /* Fluid editorial scale — desktop-first drama, composed floors for mobile */
  --fs-colossal: clamp(64px, 10vw, 152px);   /* one word per page, max */
  --fs-display:  clamp(46px, 6.4vw, 96px);   /* page heroes */
  --fs-title:    clamp(34px, 4.2vw, 60px);   /* section headlines */
  --fs-heading:  clamp(24px, 2.4vw, 32px);   /* sub-sections */
  --fs-numeral:  clamp(72px, 9vw, 140px);    /* statistics */
  --fs-lead:     clamp(18px, 1.5vw, 21px);
  --fs-body:     17px;
  --fs-small:    14px;
  --fs-micro:    11.5px;

  --lh-display: 1.02;
  --lh-title:   1.08;
  --lh-body:    1.72;

  --track-eyebrow: 0.34em;
  --track-caps:    0.18em;
  --track-display: -0.015em;

  /* ---- Space · vertical rhythm ---- */
  --sp-section:    clamp(96px, 12vw, 200px);   /* between chapters */
  --sp-section-sm: clamp(64px, 8vw, 128px);
  --sp-block:      clamp(40px, 5vw, 80px);
  --sp-element:    28px;

  /* ---- Layout ---- */
  --margin: clamp(22px, 6vw, 104px);   /* page gutters */
  --gutter: clamp(16px, 2vw, 32px);    /* grid gutter */
  --measure: 62ch;                     /* body copy max */

  /* ---- Motion · cinematic, never flashy ---- */
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-fast:   0.35s;
  --dur-base:   0.7s;
  --dur-slow:   1.1s;
}