:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 32px;
  --space-6: 52px;
  --space-7: 84px;
  --space-8: 136px;
  --space-9: 220px;

  --font-family-body: 'waverly-cf', sans-serif;
  --font-family-heading: 'natom-pro-title', sans-serif;
  --font-family-sans: var(--font-family-heading);
  --font-family-serif: var(--font-family-body);
  --font-family-mono: ui-monospace, monospace;

  --font-size-0: 12px;
  --font-size-1: 14px;
  --font-size-2: 16px;
  --font-size-3: 18px;
  --font-size-4: 20px;
  --font-size-5: 22px;
  --font-size-6: 26px;
  --font-size-7: 30px;
  --font-size-8: 40px;
  --font-size-9: 50px;
  --font-size-10: 60px;

  --line-height-0: 16px;
  --line-height-1: 20px;
  --line-height-2: 24px;
  --line-height-3: 28px;
  --line-height-4: 28px;
  --line-height-5: 32px;
  --line-height-6: 36px;
  --line-height-7: 40px;
  --line-height-8: 48px;
  --line-height-9: 60px;
  --line-height-10: 72px;
  --line-height-11: 96px;
  --line-height-12: 128px;

  /* Dark portfolio theme */
  --color-bg: #121212;
  --color-bg-elevated: #1c1c1c;
  --color-text: #f2f0eb;
  --color-text-muted: #9c9c96;
  --color-border: rgba(255, 255, 255, 0.12);
  /* BMW Laguna Seca Blue */
  --color-laguna: #0066b1;
  --color-laguna-soft: rgba(0, 102, 177, 0.18);
  --color-yellow: #fff482;
  --color-yellow-soft: rgba(255, 248, 170, 0.38);
  --color-accent: var(--color-laguna);

  /* Template tokens (semantics unchanged: white = surface, black = ink) */
  --white: #0a0a0a;
  --black: #f2f0eb;
  --gray-200: var(--color-border);
  --gray-600: var(--color-text-muted);
  --blue-600: var(--color-accent);
  --magenta-100: #2a2228;

  --max-width-0: 320px;
  --max-width-1: 768px;

  /* Fluid type (900px → 1440px viewport), all px */
  --type-subtext: clamp(14px, calc(14px + 4 * ((100vw - 900px) / 540)), 18px);
  --type-subtext-lg: clamp(16px, calc(16px + 4 * ((100vw - 900px) / 540)), 20px);
  --type-quote: clamp(24px, calc(24px + 8 * ((100vw - 900px) / 540)), 32px);
  --type-h1: clamp(40px, calc(40px + 32 * ((100vw - 900px) / 540)), 72px);
  --type-h2: clamp(34px, calc(34px + 22 * ((100vw - 900px) / 540)), 56px);
  --type-h3: clamp(26px, calc(26px + 14 * ((100vw - 900px) / 540)), 40px);
  --type-h4: clamp(22px, calc(22px + 10 * ((100vw - 900px) / 540)), 32px);
  --type-h5: clamp(18px, calc(18px + 6 * ((100vw - 900px) / 540)), 24px);
  --type-h6: clamp(16px, calc(16px + 4 * ((100vw - 900px) / 540)), 20px);
  --lh-subtext: 1.375;
  --color-link: #82969b;

  /* Tailwind font-size tokens */
  --font-size-h1: var(--type-h1);
  --font-size-h2: var(--type-h2);
  --font-size-h3: var(--type-h3);
  --font-size-h4: var(--type-h4);
  --font-size-h5: var(--type-h5);
  --font-size-h6: var(--type-h6);
  --font-size-body: var(--type-subtext);
  --font-size-action: var(--font-size-2);
  --font-size-action-lg: var(--font-size-3);
  --font-size-label: var(--font-size-1);
  --font-size-h2-default: var(--type-h2);
  --font-size-h3-default: var(--type-h3);
  --font-size-h4-default: var(--type-h4);
  --font-size-h5-default: var(--type-h5);
}

html {
  background-color: var(--color-bg);
  color: var(--color-text);
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.site-menu-open {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

::selection {
  background: var(--color-laguna-soft);
  color: var(--color-text);
}

.site-container {
  width: calc(100vw - 48px);
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (min-width: 640px) {
  .site-container {
    width: calc(100% - 64px);
  }
}

@media only screen and (min-width: 1200px) {
  .site-container {
    width: calc(100% - 100px);
  }
}

.site-container .site-container {
  width: 100%;
}