/* ═══════════════════════════════════════════
   SOCIAL PROOF'D — Design Tokens
   ═══════════════════════════════════════════ */

:root {
  /* ── Color Palette ── */
  --color-dark:         #1a1410;
  --color-dark-surface: #231c17;
  --color-dark-card:    #2b221c;
  --color-dark-border:  #3d2f27;

  --color-light:        #fff5ef;
  --color-light-warm:   #ffe8da;
  --color-white:        #ffffff;

  /* Primary — peach */
  --color-accent:       #ffaf88;
  --color-accent-hover: #ff9660;
  --color-accent-soft:  rgba(255, 175, 136, 0.15);
  --color-accent-glow:  rgba(255, 175, 136, 0.35);

  /* Black accent */
  --color-black-accent:      #1a1410;
  --color-black-accent-soft: rgba(26, 20, 16, 0.08);

  /* ── Text Colors ── */
  --text-on-dark:       #fff5ef;
  --text-on-dark-muted: #c4a898;
  --text-on-light:      #1a1410;
  --text-on-light-muted:#6b5044;

  /* ── Typography ── */
  --font-display: 'Recoleta', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', 'Futura', 'Century Gothic', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.25rem;
  --text-6xl:  4rem;

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight:  -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.18em;

  /* ── Spacing ── */
  --space-xs:   0.5rem;
  --space-sm:   0.75rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;

  --section-pad: clamp(4rem, 8vw, 7rem);

  /* ── Layout ── */
  --max-width:      1200px;
  --max-width-text: 720px;
  --max-width-wide: 1400px;
  --gutter:         clamp(1.25rem, 4vw, 2.5rem);

  /* ── Effects ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 30px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 24px var(--color-accent-glow);

  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}