/* Sound Sprouts — Design Tokens */

:root {
  /* ───── Colors ─────────────────────────────────────── */
  --ss-cream:        #F5F1E8;   /* Section backgrounds, cards */
  --ss-paper:        #FBF8F1;   /* Page background */
  --ss-ink:          #2A2E22;   /* Primary text on light bg */
  --ss-ink-soft:     #5C5F50;   /* Secondary text, captions */

  --ss-sage:         #6B8A6E;   /* Mid-tone, secondary fills */
  --ss-moss-deep:    #3D5841;   /* Primary brand color, headlines, primary buttons */
  --ss-sprout:       #A8BFA0;   /* Soft tint, chip backgrounds */
  --ss-terracotta:   #C97A56;   /* Accent color, secondary CTAs, "Sprouts" word */
  --ss-butter:       #E8C77D;   /* Soft accent, hero halo, flower center */
  --ss-soil:         #7A4F2E;   /* Logo soil hill — used only in the mark */

  /* ───── Typography ─────────────────────────────────── */
  --ss-font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --ss-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ss-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --ss-text-xs:      0.6875rem;  /* 11px */
  --ss-text-sm:      0.8125rem;  /* 13px */
  --ss-text-base:    1rem;       /* 16px */
  --ss-text-md:      1.0625rem;  /* 17px */
  --ss-text-lg:      1.5rem;     /* 24px */
  --ss-text-xl:      1.75rem;    /* 28px */
  --ss-text-2xl:     2rem;       /* 32px */
  --ss-text-3xl:     2.75rem;    /* 44px */
  --ss-text-4xl:     5.25rem;    /* 84px */

  --ss-leading-tight:  0.98;
  --ss-leading-snug:   1.25;
  --ss-leading-normal: 1.55;
  --ss-leading-loose:  1.65;

  --ss-tracking-headline: -3px;
  --ss-tracking-h2:       -0.3px;
  --ss-tracking-eyebrow:   3px;

  /* ───── Radii ──────────────────────────────────────── */
  --ss-radius-sm:    4px;
  --ss-radius-md:    8px;
  --ss-radius-pill:  999px;

  /* ───── Spacing (4px base) ─────────────────────────── */
  --ss-space-1:  4px;
  --ss-space-2:  8px;
  --ss-space-3:  12px;
  --ss-space-4:  16px;
  --ss-space-5:  24px;
  --ss-space-6:  32px;
  --ss-space-7:  48px;
  --ss-space-8:  64px;
  --ss-space-9:  80px;

  /* ───── Borders ────────────────────────────────────── */
  --ss-border-hairline: 1px solid rgba(42, 46, 34, 0.13);
  --ss-border-strong:   1.5px solid var(--ss-moss-deep);
}