/* ============================================================
   Ryan Seeras design tokens
   Warm, editorial personal-brand palette: cream paper,
   near-black warm-brown ink, and a terracotta / clay accent.
   ============================================================ */

:root {
  /* --- Warm neutrals (paper → ink) --- */
  --cream-50:  #F7F5F0;
  --cream-100: #EFEDE8;   /* page background */
  --cream-150: #EAE7DF;
  --cream-200: #E6E1D6;   /* card / tinted surface */
  --cream-300: #DBD5C8;   /* hairline borders, hover fills */
  --sand-400:  #C7BFAF;   /* muted decorative / disabled */
  --taupe-500: #8B8173;   /* faint / placeholder text */
  --taupe-600: #6B6459;   /* secondary text */
  --ink-700:   #4A4339;
  --ink-800:   #35302A;
  --ink-900:   #262119;   /* primary text */
  --ink-950:   #191510;   /* deepest ink, solid buttons */

  /* --- Clay / terracotta accent --- */
  --clay-50:   #FAEFE7;
  --clay-100:  #F3DED0;
  --clay-200:  #E7BFA6;
  --clay-300:  #DBA07C;
  --clay-400:  #CE7F53;
  --clay-500:  #C0623A;   /* primary accent */
  --clay-600:  #A65230;
  --clay-700:  #874225;
  --clay-800:  #653019;

  --green-500: #5E7B4F;
  --amber-500: #C79338;
  --red-500:   #B24632;

  --white: #FFFFFF;
  --black: #0F0C08;

  /* --- Semantic aliases --- */
  --bg-page:        var(--cream-100);
  --bg-page-alt:    var(--cream-50);
  --bg-surface:     var(--white);
  --bg-card:        var(--cream-200);
  --bg-inset:       var(--cream-150);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--taupe-600);
  --text-muted:     var(--taupe-500);
  --text-accent:    var(--clay-500);
  --text-on-dark:   var(--cream-50);
  --text-on-accent: var(--cream-50);

  --border-subtle:  var(--cream-300);
  --border-strong:  var(--ink-900);
  --border-accent:  var(--clay-500);

  --accent:         var(--clay-500);
  --accent-hover:   var(--clay-600);
  --accent-soft:    var(--clay-100);
  --focus-ring:     var(--clay-400);

  /* --- Type families --- */
  --font-display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --font-body:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* --- Fluid display sizes --- */
  --text-mega:    clamp(4.5rem, 14vw, 13rem);
  --text-display: clamp(2.5rem, 6vw, 4.5rem);
  --text-h1:      clamp(2rem, 4.2vw, 3.25rem);
  --text-h2:      clamp(1.6rem, 3vw, 2.25rem);
  --text-h3:      1.5rem;
  --text-h4:      1.25rem;

  --text-xl:   1.375rem;
  --text-lg:   1.125rem;
  --text-base: 1rem;
  --text-sm:   0.875rem;
  --text-xs:   0.75rem;
  --text-eyebrow: 0.8125rem;

  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.16em;

  /* --- Spacing scale (8px base) --- */
  --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-section: clamp(4rem, 10vw, 9rem);

  /* --- Radii --- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* --- Shadows --- */
  --shadow-xs:  0 1px 2px rgba(38, 33, 25, 0.06);
  --shadow-sm:  0 2px 8px rgba(38, 33, 25, 0.06);
  --shadow-md:  0 8px 24px rgba(38, 33, 25, 0.08);
  --shadow-lg:  0 18px 48px rgba(38, 33, 25, 0.12);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* --- Layout --- */
  --container-max:  1180px;
  --container-wide: 1400px;
  --container-pad:  clamp(1.25rem, 5vw, 4rem);

  /* --- Motion --- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
}

/* ============================================================
   BASE: light reset plus element defaults
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--clay-200);
  color: var(--ink-950);
}

a { color: var(--text-accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}