/* ============================================================
   SoulSyn — Essência · Landing Page · Design Tokens
   Source of truth for colors, type, spacing, radii, etc.
   Drop this into the WordPress theme (e.g. /assets/css/tokens.css)
   ============================================================ */

:root {
  /* ── Colors ── */
  --ss-bg:          #F5F1E8;   /* primary background (warm cream) */
  --ss-bg-2:        #EDE7D8;   /* alternating section background */
  --ss-paper:       #FBF8EF;   /* card / panel surface */
  --ss-ink:         #131418;   /* primary text + dark sections bg */
  --ss-ink-2:       #3A3A40;   /* secondary text */
  --ss-muted:       rgba(19, 20, 24, 0.55);
  --ss-rule:        rgba(19, 20, 24, 0.18);   /* hairline divider */
  --ss-accent:      #B8794A;   /* warm amber — the only accent */

  /* on-dark variants (manifesto / principles sections) */
  --ss-on-dark-bg:    #131418;
  --ss-on-dark-text:  #F5F1E8;
  --ss-on-dark-text-2: rgba(245, 241, 232, 0.78);
  --ss-on-dark-muted:  rgba(245, 241, 232, 0.50);
  --ss-on-dark-rule:   rgba(245, 241, 232, 0.18);

  /* ── Typography ── */
  --ss-font-display: "Newsreader", "Source Serif Pro", Georgia, serif;
  --ss-font-body:    "DM Sans", system-ui, sans-serif;
  --ss-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* type scale (LP at 1440px wide; treat as max) */
  --ss-size-eyebrow: 11px;     /* label, eyebrow, dateline */
  --ss-size-body:    16px;     /* default paragraph */
  --ss-size-body-lg: 17px;
  --ss-size-lede:    21px;     /* italic display lede */
  --ss-size-h3:      26px;
  --ss-size-h2:      64px;
  --ss-size-h1:      92px;

  /* tracking */
  --ss-tracking-eyebrow: 0.22em;
  --ss-tracking-tight:  -0.025em;

  /* line-height */
  --ss-leading-display: 0.96;
  --ss-leading-body:    1.7;

  /* ── Spacing ── */
  --ss-pad-x:           80px;   /* horizontal page padding @ desktop */
  --ss-section-y:       140px;  /* section top/bottom padding */
  --ss-section-y-sm:    120px;
  --ss-gap-grid:        80px;   /* major two-column gap */
  --ss-gap-cards:       32px;
  --ss-gap-stack:       24px;

  /* ── Radii / lines ── */
  --ss-radius-card:     4px;
  --ss-radius-pill:     999px;
  --ss-stroke:          1px;
}

/* breakpoints (reference, not vars):
   1440px max content width
   1024px tablet
   768px  mobile
*/