/*
 * RonnieOdell.com — Design Tokens
 * Single source of truth for the site's visual language.
 * Extracted 2026-06-30 from inline styles across the site.
 */

:root {
  /* ── PALETTE ── */
  --cream-50:   #FBF7F1;
  --cream-100:  #F5EFE5;
  --cream-200:  #E8DECB;
  --stone-300:  #C9BFA9;
  --stone-500:  #8A7E68;
  --stone-700:  #4D4538;
  --stone-900:  #2A2620;
  --warm-dark:  #1A1714;
  --amber:      #B8732A;
  --amber-light:#D89248;
  --amber-dim:  rgba(184, 115, 42, 0.10);
  --amber-bord: rgba(184, 115, 42, 0.32);

  /* ── TYPOGRAPHY ── */
  --serif: 'Newsreader', Georgia, serif;
  --sans:  'DM Sans', sans-serif;

  --fs-eyebrow: 0.74rem;
  --fs-body:    1rem;
  --fs-lead:    clamp(1.15rem, 1.85vw, 1.4rem);
  --fs-h3:      clamp(1.3rem, 2vw, 1.65rem);
  --fs-h2:      clamp(1.8rem, 2.8vw, 2.4rem);
  --fs-h1:      clamp(2.4rem, 4vw, 3.4rem);
  --fs-hero:    clamp(2.8rem, 5vw, 4.6rem);

  --ls-tight:   -0.02em;
  --ls-eyebrow: 0.14em;
  --ls-mono:    0.13em;

  /* ── SPACING ── */
  --section-py:   clamp(4rem, 8vw, 7rem);
  --section-px:   clamp(1.5rem, 4vw, 4rem);
  --container:    1280px;
  --container-narrow: 820px;
  --container-prose:  64ch;

  /* ── EFFECTS ── */
  --radius-md: 8px;
  --radius-lg: 10px;
  --shadow-card: 0 1px 3px rgba(42, 38, 32, 0.04), 0 10px 40px -10px rgba(42, 38, 32, 0.08);
  --shadow-hover: 0 6px 32px -16px rgba(184, 115, 42, 0.20);

  --duration: 0.20s;
  --z-nav: 100;
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 18px; }
body {
  background: var(--cream-50);
  color: var(--stone-900);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--amber); color: var(--cream-50); }
img, svg { max-width: 100%; height: auto; display: block; }

/* ── ACCESSIBILITY ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 0.5rem; z-index: 9999;
  background: var(--stone-900); color: var(--cream-50);
  padding: 0.7rem 1.2rem; text-decoration: none;
  font-family: var(--sans); font-weight: 500; letter-spacing: 0.02em;
  transition: top 0.2s;
}
.skip-link:focus { top: 0.5rem; }

/* ── UTILITY TYPOGRAPHY ── */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: var(--ls-tight); line-height: 1.15; color: var(--stone-900); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--amber); font-weight: 300; }
p { line-height: 1.75; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--amber);
}