/* tokens.css — design tokens (single source of truth for visuals)
 *
 * Every other stylesheet must use var(--token-name).
 * No raw hex codes, no raw font-family declarations outside this file.
 *
 * Brand source: _me/brand-kit.md (Mariana Garcia / MG Digital Studio)
 * Updated 2026-05-19 — placeholder values replaced with brand decisions.
 */

:root {
  /* ---------- Color ---------- */
  --brand-primary:        #E08B4C;  /* Terracotta — primary accent, CTAs */
  --brand-primary-hover:  #C9763A;  /* Darker terracotta on hover */
  --brand-accent:         #6B8F71;  /* Forest Sage — secondary accent */
  --brand-accent-hover:   #587359;

  --text-primary:         #2C2C2C;  /* Soft Black */
  --text-muted:           #6B6B6B;
  --text-inverse:         #FDFCFA;  /* Paper White */

  --bg-base:              #FDFCFA;  /* Paper White */
  --bg-surface:           #F3F0EB;  /* Warm Cloud — alt sections, cards */
  --bg-overlay:           rgb(44 44 44 / 0.55);

  --border-subtle:        #E6E1D8;
  --border-strong:        #2C2C2C;

  --success:              #6B8F71;
  --error:                #B3261E;

  /* ---------- Typography ---------- */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --fs-h1: clamp(2.5rem, 6vw, 4.25rem);
  --fs-h2: clamp(1.875rem, 4vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 2.5vw, 1.75rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-body:  1.75;

  --tracking-tightest: -0.03em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-widest:   0.16em;

  /* ---------- Spacing (4px scale) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-11: 12rem;

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* ---------- Shadow ---------- */
  --shadow-1: 0 1px 2px rgb(44 44 44 / 0.06);
  --shadow-2: 0 8px 24px rgb(44 44 44 / 0.08);
  --shadow-3: 0 24px 60px rgb(44 44 44 / 0.12);

  /* ---------- Layout ---------- */
  --container-max: 1140px;
  --container-narrow: 760px;
  --container-wide: 1280px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}