/* Base reset + tokens */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  transition: background 0.35s ease, color 0.35s ease;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-break: break-word; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }

/* Fluid type scale */
:root {
  --text-xs:  clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:  clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg:  clamp(1.125rem, 1.06rem + 0.35vw, 1.25rem);
  --text-xl:  clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  --text-3xl: clamp(2.25rem, 1.85rem + 2vw, 3.25rem);
  --text-hero: clamp(2.75rem, 2.2rem + 3vw, 4.5rem);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
  --container: 1200px;
  --container-narrow: 880px;

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