:root {
  color-scheme: light;

  /* Brand */
  --upy-green-500: #30c68e;
  --upy-green-600: #14aa76;
  --upy-green-700: #0b8f63;
  --upy-green-soft: #dff7ee;
  --upy-green-rgb: 48, 198, 142;

  /* Neutrals */
  --upy-ink-950: #0d1110;
  --upy-ink-900: #141817;
  --upy-ink-800: #1d2421;
  --upy-gray-700: #46504c;
  --upy-gray-500: #73807b;
  --upy-gray-300: #cbd5d1;
  --upy-gray-200: #dde5e2;
  --upy-gray-100: #edf2f0;
  --upy-paper: #f7faf8;
  --upy-white: #ffffff;

  /* Semantic */
  --upy-success: #14875e;
  --upy-success-soft: #e0f5ed;
  --upy-warning: #9b6811;
  --upy-warning-soft: #fff2d8;
  --upy-danger: #b43e3e;
  --upy-danger-soft: #fbe8e8;
  --upy-info: #316f8a;
  --upy-info-soft: #e4f2f7;

  --upy-gradient-brand: linear-gradient(135deg, #2bd49a 0%, #0b8f63 100%);
  --upy-gradient-dark: linear-gradient(145deg, #1d2421 0%, #0d1110 72%);

  /* Typography */
  --font-display: "Inter Tight", "Arial Narrow", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --fs-display-xl: clamp(3.75rem, 8vw, 8.5rem);
  --fs-display-lg: clamp(3rem, 6vw, 6.5rem);
  --fs-h1: clamp(2.75rem, 5.3vw, 5.5rem);
  --fs-h2: clamp(2.2rem, 4vw, 4.25rem);
  --fs-h3: clamp(1.6rem, 2.4vw, 2.5rem);
  --fs-h4: clamp(1.25rem, 1.6vw, 1.625rem);
  --fs-body-lg: clamp(1.1rem, 1.3vw, 1.35rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-display: 0.88;
  --lh-heading: 1.02;
  --lh-body: 1.65;
  --lh-tight: 1.25;

  --tracking-display: -0.055em;
  --tracking-heading: -0.035em;
  --tracking-label: 0.12em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  --section-space: clamp(4.5rem, 9vw, 10rem);
  --container-gutter: clamp(1.25rem, 3vw, 3rem);
  --container-max: 90rem;
  --grid-gap: clamp(1rem, 2vw, 2rem);

  /* Shape and borders */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-image: 10px;
  --border-subtle: 1px solid rgba(13, 17, 16, 0.14);
  --border-dark: 1px solid rgba(255, 255, 255, 0.15);
  --shadow-soft: 0 18px 60px rgba(13, 17, 16, 0.1);
  --shadow-focus: 0 0 0 3px rgba(var(--upy-green-rgb), 0.35);

  /* Motion */
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 700ms;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layering */
  --z-base: 1;
  --z-header: 50;
  --z-overlay: 100;
  --z-skip: 200;
}