/* ============================================================
   JTR.COM — DESIGN TOKENS
   Source of truth for palette, type, spacing, motion.
   Modify here. Never hardcode.
   ============================================================ */

:root {
  /* ---------- COLOR ---------- */
  --paper:        #F4F1EC;          /* warm off-white, primary light surface */
  --concrete:    #E0DCD4;            /* secondary surface, Mode B blocks */
  --ink:         #0E0E0E;            /* primary dark surface, primary text on light */
  --ink-soft:    #2A2826;            /* body text on light, secondary dark surface */
  --ink-mid:     #6B6862;            /* mono labels, captions, metadata */
  --rule:        rgba(26, 26, 26, 0.10);    /* vertical line grid on light */
  --rule-light:  rgba(255, 255, 255, 0.08); /* vertical line grid on dark */
  --red:         #E62013;            /* single accent. Use sparingly. */
  --red-deep:    #A8170D;            /* hover / pressed red */
  --live:        #4ADE80;            /* functional only: live-status pulse */

  /* glass */
  --glass-light: rgba(244, 241, 236, 0.55);
  --glass-dark:  rgba(14, 14, 14, 0.55);
  --glass-blur:  24px;

  /* ---------- TYPE ---------- */
  --font-display: "Archivo Black", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-serif:   "Instrument Serif", Georgia, serif;

  /* type scale — clamp(min, fluid, max) */
  --t-hero:       clamp(64px, 11vw, 180px);
  --t-display:    clamp(48px, 7vw, 88px);
  --t-h2:         clamp(36px, 4.5vw, 56px);
  --t-h3:         clamp(24px, 2.4vw, 40px);
  --t-h4:         clamp(20px, 1.6vw, 24px);
  --t-body:       17px;
  --t-body-lg:    19px;
  --t-small:      14px;
  --t-mono-sm:    12px;
  --t-mono-xs:    10px;

  /* line-height */
  --lh-tight:     0.95;
  --lh-snug:      1.15;
  --lh-normal:    1.5;
  --lh-loose:     1.7;

  /* tracking */
  --track-tight:  -0.03em;
  --track-normal: 0;
  --track-wide:   0.12em;
  --track-wider:  0.18em;

  /* ---------- SPACE ---------- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;
  --s-11:  160px;
  --s-12:  200px;

  /* ---------- LAYOUT ---------- */
  --max-w:        1440px;
  --max-w-prose:  720px;
  --gutter:       clamp(24px, 4vw, 80px);
  --section-y:    clamp(64px, 12vh, 160px);

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     200ms;
  --dur-base:     400ms;
  --dur-slow:     800ms;
  --dur-vslow:    1200ms;

  /* ---------- Z ---------- */
  --z-grid:       1;
  --z-content:    10;
  --z-glass:      20;
  --z-nav:        100;
  --z-overlay:    200;
}