:root {
  /* Colors */
  --color-black:  #000000;
  --color-white:  #ffffff;
  --color-yellow: #f0fa00;

  /* Surfaces */
  --bg-dark:   var(--color-black);
  --bg-light:  var(--color-white);
  --bg-accent: var(--color-yellow);

  /* Text */
  --text-on-dark:   var(--color-white);
  --text-on-light:  var(--color-black);
  --text-on-accent: var(--color-black);

  /* Font families */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Type scale — fluid with clamp() */
  --text-display: clamp(4rem,   9vw, 8rem);
  --text-h1:      clamp(2.75rem, 6vw, 5rem);
  --text-h2:      clamp(2rem,    4vw, 3rem);
  --text-h3:      clamp(1.25rem, 2vw, 1.75rem);
  --text-body:    clamp(1rem,    1.2vw, 1.125rem);
  --text-label:   0.6875rem;
  --text-metric:  clamp(2rem, 5vw, 6rem);

  /* Font weights */
  --weight-book:       400;
  --weight-medium:     500;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* Line heights */
  --leading-tight:  0.93;
  --leading-snug:   1.1;
  --leading-normal: 1.6;

  /* Letter spacing */
  --tracking-label: 0.14em;

  /* Spacing scale (8px base) */
  --space-1:  0.5rem;   /*  8px */
  --space-2:  1rem;     /* 16px */
  --space-3:  1.5rem;   /* 24px */
  --space-4:  2rem;     /* 32px */
  --space-5:  2.5rem;   /* 40px */
  --space-6:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-10: 5rem;     /* 80px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */

  /* Section spacing */
  --space-section: clamp(5rem, 10vw, 10rem);

  /* Page margins */
  --page-margin: clamp(1.5rem, 6vw, 7.5rem);

  /* Max widths */
  --max-content: 1440px;
  --max-prose:   720px;

  /* Motion */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quad:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
}