:root {
  --bg-frame: #121212;
  --bg-canvas: #f8f9fa;
  --bg-ink: #171717;
  --bg-white: #ffffff;
  --text-ink: #171717;
  --text-mute: #3d3d3d;
  --text-on-dark: #f8f9fa;
  --color-brand-yellow: #ffb800;
  --color-brand-orange: #ff5722;
  --color-brand-purple: #7c4dff;
  --color-brand-blue: #2979ff;
  --color-brand-green: #00e676;
  --color-card-green: #00c853;
  --color-card-red: #ff3d00;
  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-body: "Inter", sans-serif;
  --header-height: 72px;
  --touch-min: 44px;
  --radius-canvas: 24px;
  --radius-card: 20px;
  --radius-pill: 999px;
  --pad-x: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --rhythm: clamp(2.5rem, 5vw, 4.5rem);
  --display-xl: clamp(4.8rem, 16vw, 12rem);
  --display-lg: clamp(2.2rem, 5vw, 4.4rem);
  --display-md: clamp(1.7rem, 3vw, 2.6rem);
  --body-size: clamp(1rem, 1.1vw, 1.125rem);
  --shadow-canvas: 0 20px 50px rgb(0 0 0 / 0.3);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}