/* ============================================================
   THE TRIANGULATE PROJECT — Design Tokens
   Drop-in CSS custom properties. Dark is the primary theme.
   ============================================================ */

:root {
  /* ---- Core palette ---- */
  --tri-black:        #0C0E12; /* matte near-black — primary ground */
  --tri-ink:          #111420; /* raised near-black surface */
  --tri-midnight:     #131D33; /* deep midnight blue — depth, panels */
  --tri-midnight-2:   #0E1626; /* darker midnight */
  --tri-slate:        #7C8698; /* slate grey — secondary text on dark */
  --tri-slate-dim:    #4F5871; /* faint text / hairlines on dark */
  --tri-ivory:        #ECE3D1; /* warm ivory — primary light */
  --tri-ivory-soft:   #F4EEDE; /* brightest ivory — headings on dark */
  --tri-paper:        #E8DFCB; /* light-spread / print ground */
  --tri-paper-2:      #DED3BA; /* light ground, deeper */
  --tri-brass:        #B28A54; /* antique brass — primary accent */
  --tri-gold:         #CAA662; /* old gold — the symbol, key emphasis */
  --tri-bronze:       #7D6A4B; /* bronze — muted accent on light */

  /* ---- Semantic (DARK theme, primary) ---- */
  --bg:            var(--tri-black);
  --surface:       var(--tri-ink);
  --surface-alt:   var(--tri-midnight);
  --text:          var(--tri-ivory-soft);
  --text-muted:    var(--tri-slate);
  --text-faint:    var(--tri-slate-dim);
  --accent:        var(--tri-gold);
  --accent-quiet:  var(--tri-brass);
  --border:        rgba(236, 227, 209, 0.13);
  --border-strong: rgba(236, 227, 209, 0.22);
  --link:          var(--tri-gold);
  --link-hover:    var(--tri-ivory-soft);

  /* ---- Type families ---- */
  --font-serif: "Spectral", Georgia, "Times New Roman", serif;   /* display + editorial */
  --font-sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif; /* UI + wordmark */
  --font-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; /* data + labels */

  /* ---- Type scale (fluid) ---- */
  --fs-hero:    clamp(32px, 4.6vw, 60px);  /* Spectral 300, line-height 1.12 */
  --fs-h2:      clamp(30px, 4.4vw, 52px);  /* Spectral 300, line-height 1.05 */
  --fs-h3:      clamp(22px, 2.6vw, 32px);  /* Spectral 300 */
  --fs-lede:    clamp(17px, 1.7vw, 21px);  /* Spectral 300, line-height 1.65 */
  --fs-body:    16px;                      /* Hanken 300/400, line-height 1.7 */
  --fs-small:   13px;
  --fs-label:   11px;                      /* mono, uppercase, tracked */

  /* ---- Tracking ---- */
  --track-wordmark: 0.28em;
  --track-eyebrow:  0.42em;
  --track-label:    0.24em;

  /* ---- Spacing rhythm ---- */
  --space-section: clamp(72px, 10vw, 150px); /* vertical padding between spreads */
  --space-gutter:  clamp(28px, 7vw, 120px);  /* horizontal page gutter */
  --maxw:          1160px;                   /* content max-width */

  /* ---- Radius / motion ---- */
  --radius:      4px;
  --radius-tile: 22%;   /* app-tile / favicon corner */
  --ease:        cubic-bezier(.22, .61, .36, 1);
  --dur-fast:    .2s;
  --dur-slow:    1.6s;  /* symbol draw-in */
}

/* ---- LIGHT theme: apply to editorial / print spreads ---- */
[data-theme="light"] {
  --bg:         var(--tri-paper);
  --surface:    var(--tri-paper-2);
  --text:       #111420;
  --text-muted: #4A4436;
  --text-faint: var(--tri-bronze);
  --accent:     var(--tri-brass);
  --accent-quiet: var(--tri-bronze);
  --border:     rgba(28, 26, 20, 0.16);
  --link:       var(--tri-bronze);
  --link-hover: #111420;
}