/* ============================================================
   THE HANGRY BITCH COOKBOOK — Design System (static foundation)
   Self-contained: webfonts + tokens + base. No build step.
   Each page carries its own component styles inline.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Cinzel:wght@400;500;600;700;800&family=Cinzel+Decorative:wght@400;700;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IM+Fell+English:ital@0;1&display=swap');

:root {
  /* ---- Forest green (the cloth cover) ---- */
  --green-950: #0C1813;
  --green-900: #102019;
  --green-800: #16291F;
  --green-700: #1E3A2C;
  --green-600: #2B4E3B;
  --green-500: #3C684F;
  --green-400: #5A8A6E;
  --green-300: #86AE97;

  /* ---- Gold foil ---- */
  --gold-700: #8A6B27;
  --gold-600: #A8842F;
  --gold-500: #C2A04F;
  --gold-400: #D4B96E;
  --gold-300: #E4D09A;
  --gold-200: #F0E3C2;

  /* ---- Parchment / cream (the page) ---- */
  --cream-50:  #FAF5E9;
  --cream-100: #F4ECD8;
  --cream-200: #ECE0C6;
  --cream-300: #E0D0AC;
  --cream-400: #CDB888;

  /* ---- Pen-and-ink ---- */
  --ink-900: #191813;
  --ink-800: #25241D;
  --ink-700: #3A382E;
  --ink-500: #5E5A4B;
  --ink-400: #7C7765;

  /* ---- Oxblood — reserved for The Crash ---- */
  --oxblood-700: #6A241B;
  --oxblood-600: #7E2C22;
  --oxblood-500: #97392B;
  --oxblood-300: #C98579;

  /* ---- Sage / restorative ---- */
  --sage-500: #6E8A5E;
  --sage-300: #A7BD93;

  /* ---- Semantic surfaces ---- */
  --surface-page:    var(--cream-100);
  --surface-raised:  var(--cream-50);
  --surface-sunken:  var(--cream-200);
  --surface-ink:     var(--green-800);
  --surface-ink-deep:var(--green-900);
  --surface-crash:   var(--oxblood-600);
  --parchment:       #F5F0E6;

  /* ---- Text on light ---- */
  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-800);
  --text-muted:   var(--ink-500);
  --text-faint:   var(--ink-400);
  --text-gold:    var(--gold-700);

  /* ---- Text on dark ---- */
  --text-on-ink:        var(--cream-100);
  --text-on-ink-muted:  var(--green-300);
  --text-on-ink-gold:   var(--gold-500);

  /* ---- Accent / brand ---- */
  --accent:          var(--gold-600);
  --accent-strong:   var(--gold-700);
  --accent-on-ink:   var(--gold-500);
  --brand-green:     var(--green-800);

  /* ---- Lines & borders ---- */
  --line-hairline:  rgba(25, 24, 19, 0.14);
  --line-strong:    rgba(25, 24, 19, 0.30);
  --line-gold:      rgba(168, 132, 47, 0.55);
  --line-on-ink:    rgba(228, 208, 154, 0.22);

  /* ---- Crash-severity states ---- */
  --state-crash:     var(--oxblood-600);
  --state-crash-bg:  rgba(126, 44, 34, 0.10);
  --state-sideways:  var(--gold-700);
  --state-sideways-bg: rgba(168, 132, 47, 0.12);
  --state-restored:  var(--sage-500);
  --state-restored-bg: rgba(110, 138, 94, 0.14);

  --focus-ring: rgba(194, 160, 79, 0.55);

  /* ---- Families ---- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-engraved: 'Cinzel', 'Cormorant Garamond', serif;
  --font-engraved-deco: 'Cinzel Decorative', 'Cinzel', serif;
  --font-body: 'EB Garamond', Georgia, serif;
  --font-voice: 'IM Fell English', 'EB Garamond', Georgia, serif;

  /* ---- Type scale ---- */
  --text-3xs: 0.6875rem;
  --text-2xs: 0.75rem;
  --text-xs:  0.8125rem;
  --text-sm:  0.9375rem;
  --text-base:1.0625rem;
  --text-md:  1.1875rem;
  --text-lg:  1.4375rem;
  --text-xl:  1.875rem;
  --text-2xl: 2.5rem;
  --text-3xl: 3.375rem;
  --text-4xl: 4.5rem;
  --text-5xl: 6rem;

  /* ---- Weights ---- */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Line heights ---- */
  --leading-tight: 1.04;
  --leading-snug: 1.18;
  --leading-normal: 1.5;
  --leading-relaxed: 1.62;

  /* ---- Letter spacing ---- */
  --tracking-tightest: -0.02em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.14em;
  --tracking-widest: 0.24em;

  /* ---- Spacing ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;
  --space-9: 4.5rem;
  --space-10: 6rem;

  /* ---- Radius ---- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-hair: 1px;
  --border-rule: 1.5px;
  --border-frame: 2px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(25, 24, 19, 0.08);
  --shadow-md: 0 4px 14px rgba(25, 24, 19, 0.10);
  --shadow-lg: 0 14px 40px rgba(25, 24, 19, 0.16);
  --shadow-page: 0 22px 60px rgba(12, 24, 19, 0.34);
  --shadow-inset: inset 0 1px 0 rgba(250, 245, 233, 0.5);
  --shadow-foil: 0 1px 0 rgba(250, 245, 233, 0.35), 0 1px 2px rgba(138, 107, 39, 0.4);

  /* ---- Motion ---- */
  --ease-page: cubic-bezier(0.2, 0.65, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---- Layout ---- */
  --measure: 64ch;
  --container: 1180px;
  --frame-inset: 14px;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--text-strong);
  margin: 0 0 0.4em;
}

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--gold-300); color: var(--ink-900); }

.hb-dropcap::first-letter {
  font-family: var(--font-engraved-deco);
  font-size: 3.4em;
  line-height: 0.78;
  float: left;
  padding: 0.06em 0.10em 0 0;
  color: var(--accent-strong);
}

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