:root {  --color-primary: #1a1a2e; --color-accent: #e63946; --color-bg: #ffffff; --color-bg-alt: #f5f5f5; --color-text: #2d2d2d; --color-text-muted: #6b6b6b; --color-border: #e0e0e0;  --font-heading: 'Outfit', sans-serif; --font-body: 'Inter', sans-serif;  --text-xs: clamp(0.75rem, 1vw, 0.875rem); --text-sm: clamp(0.875rem, 1.2vw, 1rem); --text-base: clamp(1rem, 1.5vw, 1.125rem); --text-lg: clamp(1.125rem, 2vw, 1.5rem); --text-xl: clamp(1.5rem, 3vw, 2.25rem); --text-2xl: clamp(2rem, 5vw, 3.5rem);  --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 7rem;  --max-width: 1280px; --content-width: 720px; --border-radius: 6px; --border-radius-lg: 12px;  --transition-fast: 150ms ease; --transition-normal: 250ms ease; }  *, *::before, *::after { box-sizing: border-box; }  html { scroll-behavior: smooth; }  img, video, svg { max-width: 100%; height: auto; display: block; }  :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }  body { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); line-height: 1.6; background-color: var(--color-bg); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: 1.2; color: var(--color-text); } .section { padding-block: var(--space-2xl); } .section--sm { padding-block: var(--space-xl); }  .container { width: min(var(--max-width), 100% - 2 * var(--space-md)); margin-inline: auto; }