/* =========================================================
   tokens.css - Design tokens
   DM Sans + PT Serif, oxblood gradients + champagne gold,
   dramatic darks. Red is never a flat fill - always the
   gradient. Gold appears in small doses only.
   ========================================================= */

:root {
  /* ---------- Color ---------- */
  --paper:        #FFFFFF;  /* white page background */
  --paper-soft:   #F5F2EC;  /* warm subtle surface */
  --cream:        #F6F0E2;  /* warm cream for accents */
  --ink:          #121212;  /* near-black for text */
  --ink-soft:     #3D3A36;  /* secondary text */
  --ink-mute:     #6B6760;  /* tertiary text */

  --night:        #161010;  /* dark sections - oxblood-tinted black */
  --night-elev:   #211614;  /* slight elevation on dark */
  --night-text:   #F5F0E5;  /* cream text on dark */
  --night-mute:   rgba(245, 240, 229, 0.65);

  --rule:         #E8E2D6;  /* light hairline */
  --rule-soft:    rgba(232, 226, 214, 0.5);
  --rule-night:    rgba(245, 240, 229, 0.18);

  /* ---------- Oxblood accent (never flat - use --grad-accent for fills) ---------- */
  --accent:       #8E2323;  /* oxblood - text/borders on light (8.8:1, passes AA) */
  --accent-deep:  #6E1414;  /* deeper oxblood - hover */
  --accent-soft:  #D9756B;  /* soft brick - text on dark surfaces (6:1 on night) */
  --accent-ink:   #8E2323;  /* oxblood text on light bg (8.8:1, passes AA) */
  --grad-accent:  linear-gradient(100deg, #7A1A1A 0%, #B03333 55%, #8E2323 100%);
  --grad-accent-hover: linear-gradient(100deg, #6E1414 0%, #9C2828 55%, #7A1A1A 100%);

  /* ---------- Champagne gold (small doses: curves, script words,
       label hairlines, First Class foil) ---------- */
  --gold:         #C9A96B;  /* champagne - decorative on light */
  --gold-bright:  #E3C88A;  /* bright champagne - on dark (11.5:1 on night) */
  --gold-ink:     #8A6D36;  /* gold text on light (4.87:1, passes AA) */
  --grad-gold:        linear-gradient(100deg, #8A6D36 0%, #C9A96B 55%, #8A6D36 100%);
  --grad-gold-night:  linear-gradient(100deg, #CBA75F 0%, #F4E4B0 50%, #CBA75F 100%);

  /* ---------- Type families ---------- */
  --font-display: 'Playfair Display', 'PT Serif', 'Times New Roman', Georgia, serif;
  --font-quote:   'PT Serif', 'Times New Roman', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ---------- Type scale (clamp for fluid responsive) ---------- */
  --fs-display-xl: clamp(56px, 9vw, 132px); /* hero display */
  --fs-display-1:  clamp(34px, 4.6vw, 64px); /* section display */
  --fs-display-2:  clamp(28px, 3vw, 44px);   /* sub display */
  --fs-heading:    clamp(22px, 2.2vw, 32px); /* h3 */
  --fs-body-lg:    18px;                     /* large body */
  --fs-body:       16px;                     /* body */
  --fs-body-sm:    14px;                     /* small body */
  --fs-caption:    13px;                     /* captions */
  --fs-label:      12px;                     /* labels (small caps) */
  --fs-tiny:       11px;                     /* tiny */

  /* ---------- Line heights ---------- */
  --lh-display:    1.05;
  --lh-heading:    1.2;
  --lh-body:       1.5;
  --lh-tight:      1.3;

  /* ---------- Letter spacing ---------- */
  --ls-display:    -0.01em;
  --ls-label:      0.18em;   /* small caps spacing */
  --ls-mono:       0.04em;

  /* ---------- Weights ---------- */
  --w-regular:     400;
  --w-medium:      500;
  --w-semi:        600;
  --w-bold:        700;
  --w-black:       900;
  --w-display:     500;  /* Playfair headings - medium, never shouted */

  /* ---------- Spacing (8px baseline) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  16px;
  --s-4:  24px;
  --s-5:  32px;
  --s-6:  48px;
  --s-7:  64px;
  --s-8:  96px;
  --s-9:  128px;
  --s-10: 192px;

  /* ---------- Layout ---------- */
  --content-max:  1320px;
  --text-max:     64ch;
  --gutter:       clamp(20px, 4vw, 48px);
  --section-py:   clamp(100px, 13vw, 200px);
  --slant-h:      3.84vw; /* vertical drop of the 2.2deg slant - used by the slab's
                     bottom edge and the footer's top edge */

  /* ---------- Borders & rules ---------- */
  --rule-w:       1px;
  --radius-sm:    2px;
  --radius:       4px;
  --radius-lg:    8px;

  /* ---------- Motion ---------- */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     200ms;
  --dur:          400ms;
  --dur-slow:     700ms;
}