/* === WET ROLLER DESIGN SYSTEM ===
   Shared tokens + base components used by /recipes/*.html.
   Source of truth for tokens: /design.md.
   See /design.html for the full system showcase.

   FONT LOADING: each HTML <head> must include a preconnect + stylesheet
   link to Google Fonts (Vina Sans + Space Grotesk + Inter + JetBrains Mono).
   We do NOT @import fonts here — @import triggers a slow waterfall and
   causes Vina to render with the fallback before swapping in. See any
   recipe head for the exact link tags. */

:root {
  /* COLOR */
  --color-accent: #FF90E8;
  --color-accent-ink: #000000;
  --color-ink: #000000;
  --color-ink-muted: #3D3D3D;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F4F4F0;
  --color-surface-raised: #FFFFFF;
  --color-divider: #EEEEEE;
  --color-focus: #FF90E8;
  --color-disabled-bg: #EDEDE8;
  --color-disabled-ink: #9A9A95;
  --color-success: #23A094;
  --color-success-surface: #E4F4F2;
  --color-warning: #FFC900;
  --color-warning-surface: #FFF6CC;
  --color-danger: #DC341E;
  --color-danger-surface: #FDE4E0;

  /* TYPE */
  --font-display: "Vina Sans", "Bebas Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 3rem;
  --text-display: 6rem;

  --line-height-tight: 0.95;
  --line-height-snug: 1.15;
  --line-height-base: 1.55;

  /* SPACE */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --container-max: 1200px;
  --gutter: clamp(16px, 4vw, 32px);

  /* BREAKPOINTS (reference) */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;

  /* Z-INDEX */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ICON */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;

  /* SHAPE */
  --border-width: 2px;
  --border-width-thick: 3px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* SHADOW */
  --shadow-sm: 2px 2px 0 0 var(--color-ink);
  --shadow-md: 4px 4px 0 0 var(--color-ink);
  --shadow-lg: 8px 8px 0 0 var(--color-ink);
  --shadow-hover: 6px 6px 0 0 var(--color-ink);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height-base);
  color: var(--color-ink);
  background: var(--color-surface);
}

h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 700; margin: 0 0 var(--space-3); letter-spacing: -0.02em; line-height: var(--line-height-snug); }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); letter-spacing: 0; }

/* Display utility — Vina Sans, hero use only */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: var(--line-height-tight);
}
p { margin: 0 0 var(--space-3); max-width: 60ch; }
.muted { color: var(--color-ink-muted); }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--color-surface-alt); padding: 2px 6px; border-radius: var(--radius-sm); }
a { color: var(--color-ink); }

/* Layout */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.band { padding: var(--space-8) 0; border-bottom: var(--border-width-thick) solid var(--color-ink); }
.band--accent { background: var(--color-accent); }
.band--alt { background: var(--color-surface-alt); }
.band--warn { background: var(--color-warning); }
.band--ink { background: var(--color-ink); color: #fff; }
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4 { color: #fff; }

/* Skip link + a11y utility */
.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: var(--space-3); z-index: var(--z-toast); background: var(--color-ink); color: #fff; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: var(--space-3); }

/* Nav
   The brand mark in the nav is intentionally oversized and lifted via
   translateY so the nav's bottom border line crosses through the mark's
   lower portion. The mark's top edge clips above the viewport on
   purpose — the visual mass sits in the lower half of the SVG so the
   crop reads as composition. The brand box is shorter than the mark
   itself so the band stays compact; align-items: flex-start anchors
   the IMG to the band top instead of vertically centering it. */
.nav { background: var(--color-surface); border-bottom: var(--border-width-thick) solid var(--color-ink); padding: 2px 0; position: sticky; top: 0; z-index: var(--z-sticky); overflow: visible; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); overflow: visible; }
.nav__brand { display: flex; align-items: flex-start; align-self: flex-start; height: 75px; text-decoration: none; color: var(--color-ink); overflow: visible; }
.nav__logo { width: 160px; height: 160px; display: block; transform: translateY(-30px); }
.nav__links { display: flex; gap: var(--space-5); font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); letter-spacing: -0.01em; }
.nav__links a { color: var(--color-ink); text-decoration: none; padding: var(--space-2) 0; border-bottom: var(--border-width-thick) solid transparent; }
.nav__links a:hover { border-bottom-color: var(--color-ink); }
.nav__links a[aria-current="page"] { border-bottom-color: var(--color-ink); }
.nav__links a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-focus); border-radius: var(--radius-sm); }

/* === Mobile nav (hamburger + right-side drawer) ===
   Rule: any .nav with 3+ links collapses to a hamburger below 768px.
   Markup pattern: see brand/preview/mobile-nav.html or any recipe. Behavior in nav.js. */
.nav__toggle { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--color-surface); border: var(--border-width) solid var(--color-ink); border-radius: var(--radius-md); cursor: pointer; padding: 0; }
.nav__toggle__bars { display: inline-flex; flex-direction: column; gap: 4px; }
.nav__toggle__bars span { width: 20px; height: 2px; background: var(--color-ink); transition: transform 150ms cubic-bezier(0.2,0.8,0.2,1), opacity 150ms; }
.nav__toggle[aria-expanded="true"] .nav__toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle__bars span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav__toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-focus); }

.nav__scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-overlay); opacity: 0; pointer-events: none; transition: opacity 150ms; }
.nav__scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.nav__drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 90vw; background: var(--color-surface); border-left: var(--border-width-thick) solid var(--color-ink); z-index: var(--z-modal); transform: translateX(100%); transition: transform 220ms cubic-bezier(0.2,0.8,0.2,1); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }
.nav__drawer[data-open="true"] { transform: translateX(0); }
.nav__drawer__head { padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-ink); display: flex; align-items: center; justify-content: space-between; }
.nav__drawer__close { background: transparent; border: none; cursor: pointer; font-size: var(--text-2xl); line-height: 1; color: var(--color-ink); padding: var(--space-2); }
.nav__drawer__list { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; overflow-y: auto; }
.nav__drawer__list a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg); text-decoration: none; color: var(--color-ink); }
.nav__drawer__list a:hover { background: var(--color-surface-alt); }
.nav__drawer__list a[aria-current="page"] { background: var(--color-ink); color: #fff; }
.nav__drawer__list a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-focus); }

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__brand { height: 54px; }
  .nav__logo { width: 120px; height: 120px; transform: translateY(-20px); }
}
@media (min-width: 769px) {
  .nav__drawer, .nav__scrim { display: none !important; }
}

/* Buttons */
.btn { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); line-height: 1; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: var(--border-width-thick) solid var(--color-ink); cursor: pointer; transition: transform 150ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 150ms cubic-bezier(0.2,0.8,0.2,1); text-decoration: none; appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: var(--shadow-md); }
.btn--secondary { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-md); }
.btn--warn { background: var(--color-warning); color: var(--color-ink); box-shadow: var(--shadow-md); }
.btn--success { background: var(--color-success); color: var(--color-ink); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; padding: var(--space-3) var(--space-2); }
.btn--ghost:hover { text-decoration: underline; }
.btn:not(.btn--ghost):hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-hover); }
.btn:not(.btn--ghost):active { transform: translate(2px,2px); box-shadow: 0 0 0 0 transparent; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-focus); transform: none; }
.btn[disabled], .btn:disabled { background: var(--color-disabled-bg); color: var(--color-disabled-ink); border-color: var(--color-disabled-ink); box-shadow: none; cursor: not-allowed; pointer-events: none; }

/* Card */
.card { background: var(--color-surface-raised); border: var(--border-width) solid var(--color-ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-5); }
.card--interactive { transition: transform 150ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 150ms cubic-bezier(0.2,0.8,0.2,1); cursor: pointer; outline: none; }
.card--interactive:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-hover); }
.card--interactive:focus-visible { box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-focus); }

/* Input */
.input { font-family: var(--font-body); font-size: var(--text-base); background: var(--color-surface); border: var(--border-width) solid var(--color-ink); border-radius: var(--radius-md); padding: var(--space-3); width: 100%; outline: none; transition: box-shadow 150ms cubic-bezier(0.2,0.8,0.2,1); }
.input:focus-visible { outline: none; box-shadow: 2px 2px 0 0 var(--color-focus); }

/* Pill */
.pill { display: inline-flex; align-items: center; font-family: var(--font-mono); font-weight: 700; font-size: var(--text-xs); background: var(--color-accent); color: var(--color-accent-ink); border: var(--border-width) solid var(--color-ink); border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); text-transform: uppercase; letter-spacing: 0.04em; }
.pill--warn { background: var(--color-warning); }
.pill--success { background: var(--color-success-surface); color: var(--color-ink); }
.pill--ghost { background: var(--color-surface); }

/* Footer */
.footer { background: var(--color-ink); color: #fff; padding: var(--space-6) 0; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; }
.footer__logo { width: 100px; height: 100px; display: block; }
.footer__meta { font-family: var(--font-mono); font-size: var(--text-xs); opacity: 0.7; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .btn:hover, .card--interactive:hover { transform: none !important; }
}