/* ──────────────────────────────────────────────────────────────────
   Pocket Cologne — Design Tokens (single source of truth)
   Loaded after each page's inline <style>, so :root values here
   win on cascade order without !important.
   ────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* Recoleta is self-hosted (not on Google Fonts). Both weights load lazily
   so the page renders body text immediately and headings hot-swap when
   ready. font-display:swap keeps FCP fast. */
@font-face { font-family: 'Recoleta'; src: url('/fonts/recoleta-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Recoleta'; src: url('/fonts/recoleta-bold.woff2')    format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Recoleta'; src: url('/fonts/recoleta-regular.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Recoleta'; src: url('/fonts/recoleta-bold.woff2')    format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* ── BACKGROUNDS ── */
  --bg-deep: #ffffff;
  --bg-primary: #ffffff;
  --bg-elevated: #f7f7f7;
  --bg-card: #ffffff;
  --bg-card-hover: #fafafa;
  --bg-soft: #f7f7f7;
  --bg-dark: #110c07;
  --bg-dark-2: #1a140d;
  --cream: #ffffff;          /* legacy var, now white */
  --cream-dark: #f0f0f0;
  --cream-mid: #e8e8e8;
  --paper: #ffffff;
  --paper-2: #f7f7f7;

  /* ── BRAND ACCENT (gold owns it) ── */
  --gold: #c9a050;
  --gold-light: #d4ad5a;
  --gold-bright: #f5d87a;
  --gold-dim: #9a7a3c;
  --accent: #c9a050;

  /* ── TEXT ── */
  --text-primary: #1a1a1a;
  --text-secondary: #4a4540;
  --text-muted: #6b6560;
  --text-dim: #a09890;
  --ink: #1a1a1a;
  --ink-2: #4a4540;
  --ink-3: #8a847d;

  /* ── SEMANTIC ── */
  --success: #4a9e65;
  --danger: #c44d4d;
  --warning: #e08a3e;
  --info: #4a8fd4;

  /* ── BORDERS / RULES ── */
  --border: rgba(0,0,0,0.10);
  --border-light: rgba(0,0,0,0.06);
  --rule: #e5e5e5;

  /* ── RADII ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ── SHADOWS ── */
  --shadow-sm: 0 1px 2px rgba(20,18,15,0.04);
  --shadow-md: 0 6px 16px rgba(20,18,15,0.06);
  --shadow-lg: 0 18px 48px rgba(20,18,15,0.10);
  --shadow-gold: 0 6px 28px rgba(201,160,80,0.12);

  /* ── SPACING SCALE ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ── FONTS ──
     Recoleta is the heading font sitewide (was Geist; pushed Recoleta in
     the font overhaul per Sam's brand direction). Body stays Geist for a
     modern sans paired against the serif display. */
  --font-display: 'Recoleta', Georgia, 'Times New Roman', serif;
  --font-body: 'Geist', 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-condensed: 'Geist', -apple-system, sans-serif;
  --font-logo: 'Recoleta', Georgia, serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ── TYPOGRAPHY SCALE (for hero / section titles) ── */
  --h1-size: clamp(2.6rem, 5.6vw, 3.8rem);
  --h2-size: clamp(1.9rem, 4vw, 2.8rem);
  --h3-size: clamp(1.3rem, 2.4vw, 1.6rem);
  --eyebrow-size: 0.78rem;

  /* ── EASING ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}