:root {
  /* Color: The Open Studio palette */
  --ink-950: #0a0a0b;
  --ink-800: #242428;
  --ink-600: #55555e;
  --paper-50: #f7f5ef;
  --paper-100: #f0ede5;
  --white: #ffffff;
  --green-500: #49e18a;
  --green-700: #147a45;
  --cobalt-500: #4c5cff;
  --cobalt-700: #2935c7;
  --coral-500: #ff6b5c;
  --yellow-400: #f3cf55;
  --line-light: rgba(10, 10, 11, .14);
  --line-dark: rgba(255, 255, 255, .20);

  /* Semantic surfaces */
  --surface-page: var(--paper-50);
  --surface-raised: var(--white);
  --surface-dark: var(--ink-950);
  --surface-dark-raised: var(--ink-800);
  --text-on-light: var(--ink-950);
  --text-on-light-muted: var(--ink-600);
  --text-on-dark: var(--paper-50);
  --text-on-dark-muted: rgba(247, 245, 239, .64);
  --border-on-light: var(--line-light);
  --border-on-dark: var(--line-dark);
  --focus-ring: var(--cobalt-500);

  /* Typography */
  --font-sans: "Space Grotesk", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --size-display: clamp(3.4rem, 9vw, 9.5rem);
  --size-h1: clamp(3rem, 7vw, 7.5rem);
  --size-h2: clamp(2.2rem, 5vw, 5.2rem);
  --size-h3: clamp(1.4rem, 2.4vw, 2.4rem);
  --size-lead: clamp(1.18rem, 1.8vw, 1.55rem);
  --size-body: clamp(1rem, 1.05vw, 1.15rem);
  --size-label: 0.8rem;

  --leading-tight: 1.04;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-label: 0.08em;

  /* Layout */
  --content-max: 1520px;
  --measure: 760px;
  --gutter: clamp(1rem, 4vw, 5rem);
  --section-space: clamp(5rem, 11vw, 11rem);

  /* Radii and borders */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --border-width: 1px;

  /* Motion */
  --duration-fast: 180ms;
  --duration-base: 380ms;
  --duration-slow: 620ms;
  --ease-standard: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Layers */
  --z-header: 100;
  --z-overlay: 200;
  --z-skip-link: 300;
}