/* ==========================================================================
   Lumoro dawn design tokens — single source of truth.
   Pages link this BEFORE their page css.

   Extracted 2026-06-09 from home.css section 1. Page stylesheets may still
   override individual tokens inside their own media queries (for example the
   768px rhythm overrides in home.css); those cascade fine after this file.
   ========================================================================== */

:root {
  /* COLOR TOKENS ----------------------------------------------------------- */

  /* Palette (plum night to dawn) */
  --ink: #15111B;          /* page top, theme color */
  --ink-2: #221A26;        /* second tone */
  --plum-mauve: #3A2A3E;
  --peach: #F2B58C;
  --amber: #FFC76B;        /* the one accent: CTA fill, rare serif word */
  --sage: #A9BFA3;         /* cool accent: 1px hairlines at ~30% opacity */
  --cream: #F4EEE4;        /* primary text on plum */
  --oat: #DED4C5;          /* muted body */

  /* Derived surface steps for the dawn arc */
  /* The dawn arc must brighten monotonically toward the cream pricing climax,
     then settle to dusk. what -> how -> proof each step warmer/lighter so the
     page reads as a sunrise building to the cream band, not a dip-then-jump. */
  --surface-what: #271C2C;
  --surface-how: #33222F;
  --surface-proof: #3C2832;     /* warmer + lighter than how, climbing to dawn */
  --surface-pricing: #EAE0D0;   /* cream-tinted dawn, brightest (the climax) */
  --surface-faq: #1C1722;       /* soft plum dusk, the quiet close after dawn */

  /* Hairline (supporting tints) */
  --hairline: rgba(169, 191, 163, 0.30);   /* sage at 30% */
  --hairline-faint: rgba(169, 191, 163, 0.16);

  /* TYPE TOKENS ------------------------------------------------------------ */

  /* Families: Fraunces display (self-hosted variable serif), Sora body */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Sora', system-ui, sans-serif;

  /* Fluid type scale */
  /* Hero display. Capped lower (was 5.5rem) so the headline holds to ~3 lines and
     the primary CTA + trust line stay above the fold on a laptop viewport. */
  --display: clamp(2.5rem, 5vw, 4.25rem);
  --step-4: 3.4rem;
  --step-3: 2.4rem;
  --step-2: 1.666rem;
  --step-1: 1.333rem;
  --step-0: 1.0625rem;     /* body */
  --step--1: 0.875rem;
  --step--2: 0.72rem;

  /* Light, expressive serif weight (never bold) */
  --serif-weight: 400;
  --serif-weight-soft: 380;

  /* Measure */
  --measure: 60ch;

  /* SPACING AND LAYOUT TOKENS ---------------------------------------------- */

  /* Spacing scale: 4 8 12 16 24 32 48 64 96 128 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --maxw: 1200px;
  --outer-pad: clamp(24px, 6vw, 96px);
  /* Vertical rhythm between sections. Was clamp(96px, 14vh, 192px), which put up
     to 252px of dead air on every section top+bottom and made the page read
     spread-out and empty. Tightened to a dense, intentional editorial cadence. */
  --section-pad: clamp(40px, 4.5vh, 60px);

  /* MOTION AND EASING TOKENS ----------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;

  /* Focus ring (contrast >= 3:1 on dark and on cream) */
  --ring: var(--amber);

  color-scheme: dark;
}