:root {
  --bg: #0e1116;
  --bg-lift: #131820;

  --ink: #e6e9ef;
  --ink-dim: #8d97a7;

  --gold: #c9a23b;
  --cyan: #99ebff;
  --teal-bright: #0e93a3;
  --teal: #005f6b;
  --violet: #6b4fa3;

  --hairline: rgba(153, 235, 255, 0.16);
  --card: rgba(255, 255, 255, 0.035);
  --card-border: rgba(230, 233, 239, 0.08);


  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-body: 300;
  --weight-display: 300;
  --leading-body: 1.65;

  --step-h2: clamp(1.9rem, 4vw, 3rem);
  --step-quote: clamp(1.6rem, 3.4vw, 2.6rem);
  --step-part: 1.7rem;
  --step-cap: 1.45rem;

  --label-size: 0.74rem;
  --label-tracking: 0.16em;
  --label-transform: uppercase;
  --kicker-tracking: 0.22em;

  --container: 1240px;
  --pad: clamp(20px, 4vw, 56px);
  --section-py: clamp(84px, 11vw, 150px);
  --section-head-gap: clamp(40px, 6vw, 72px);


  --edge: max(var(--pad), calc(50% - var(--container) / 2 + var(--pad)));


  --radius-input: 2px;
  --radius-action: 999px;
  --radius-panel: 0;

  --transition-base: 250ms ease;
  --transition-slow: 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
  --reveal-duration: 700ms;
  --reveal-offset: 26px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-base: 0.01ms;
    --transition-slow: 0.01ms;
    --reveal-duration: 0.01ms;
    --reveal-offset: 0px;
  }
}


[data-stage-bg="white"] {
  --ink: #15191f;
  --ink-dim: #505968;
  --cyan: #005f6b;
  --gold: #806000;
  --hairline: rgba(14, 17, 22, 0.24);
}