/* ===== THORNWOVEN 2 — DESIGN TOKENS ===== */

:root {
  /* ── Colors: Light Theme ── */
  --bg: #F5F0E8;
  --bg-warm: #EDE7DC;
  --bg-card: #FDFBF7;
  --text: #2C1810;
  --text-light: #5A4A3F;
  --text-muted: #8C7B6E;
  --rose: #9B3A3A;
  --rose-glow: #B34444;
  --rose-light: rgba(155,58,58,0.08);
  --moss: #7A8B6F;
  --moss-light: rgba(122,139,111,0.1);
  --sand: #B8A07A;
  --sand-light: #D4C4A0;
  --border: #E2D9CC;
  --border-light: #EBE4D8;
  --white: #FDFCFA;

  /* ── Typography ── */
  --serif: 'Abril Fatface', Georgia, serif;
  --sans: 'Poppins', -apple-system, sans-serif;

  --fs-display: clamp(3.5rem, 8vw, 7rem);
  --fs-h1: clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2: clamp(2rem, 4vw, 3.2rem);
  --fs-h3: clamp(1.4rem, 2.5vw, 2rem);
  --fs-body: 0.92rem;
  --fs-small: 0.78rem;
  --fs-micro: 0.62rem;
  --fs-eyebrow: 0.6rem;

  --ls-wide: 0.35em;
  --ls-medium: 0.22em;
  --ls-tight: 0.05em;

  /* ── Spacing ── */
  --section-pad: 6rem 3rem;
  --section-pad-mobile: 4rem 1.5rem;
  --nav-height: 70px;
  --announcement-height: 32px;

  /* ── Easing ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Durations ── */
  --dur-fast: 0.3s;
  --dur-medium: 0.6s;
  --dur-slow: 1.2s;

  /* ── Cursor ── */
  --cursor-size: 8px;
  --cursor-ring: 40px;

  /* ── Scroll Progress ── */
  --scroll-progress: 0;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
  --bg: #0C0A08;
  --bg-warm: #131110;
  --bg-card: #1A1816;
  --text: #F5F0E8;
  --text-light: #C4B8A8;
  --text-muted: #8C7B6E;
  --rose: #C75050;
  --rose-glow: #E05555;
  --rose-light: rgba(199,80,80,0.1);
  --sand: #C9B58A;
  --sand-light: #D4C4A0;
  --border: #2A2520;
  --border-light: #1E1A16;
  --white: #F5F0E8;
}