:root {
  /* Colors */
  --color-background: #ffffff;
  --color-foreground: #11130a;
  --color-brand: #d3f347;
  --color-brand-tint: #e2f787;
  --color-brand-shadow: #bae10f;
  --color-supporting: #eceffa;
  --color-muted: #f9fafa;
  --color-muted-foreground: #71717b;
  --color-border: #f0f1f3;
  --color-alpha-dark-6: rgba(17, 19, 10, 0.06);
  --color-alpha-brand-20: rgba(211, 243, 71, 0.2);
  --color-alpha-brand-80: rgba(211, 243, 71, 0.8);
  --color-alpha-light-40: rgba(255, 255, 255, 0.4);
  --color-phone-ring: #f9f9f9;
  --color-btn-secondary-shadow: #e0e3ec;

  /* Button interaction tokens */
  --background: #ffffff;
  --foreground: #11130a;
  --muted: #f9fafa;
  --border: #e0e3ec;
  --brand: #d3f347;
  --brand-hover: #e0f77e;
  --brand-border: #bae10f;
  --ring: var(--border);
  --ring-brand: var(--brand);
  --ring-nav: var(--color-border);
  --ring-nav-outer: rgba(17, 19, 10, 0.08);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-base: 150ms;
  --duration-press: 75ms;
  --press-offset: 1px;

  /* Typography */
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --text-h1-size: 48px;
  --text-h1-line: 56px;
  --text-h1-spacing: -0.96px;

  --text-h3-size: 24px;
  --text-h3-line: 32px;
  --text-h3-spacing: -0.48px;

  --text-body-size: 14px;
  --text-body-line: 20px;
  --text-body-spacing: -0.07px;

  --text-small-size: 12px;
  --text-small-line: 16px;
  --text-small-spacing: -0.06px;

  --text-large-size: 16px;
  --text-large-line: 24px;
  --text-large-spacing: -0.08px;

  --text-legal-size: 10px;
  --text-legal-line: 12px;
  --text-legal-spacing: -0.05px;

  /* Layout — content width is fixed; side margins are leftover space */
  --content-width: 1160px;
  --page-min-width: 1200px;
  --section-gap: 100px;
  --hero-height: 900px;
  --hero-media-top: 472px;
  --hero-media-height: 428px;

  /* Phone */
  --phone-width: 285px;
  --phone-height: 610px;
  --phone-radius: 36px;
  --phone-ring: 11.813px;
  --phone-inset: 1.477px;
  --phone-hero-top: 188px;

  /* Hatching divider sweep */
  --divider-sweep-period: 480px;
  --divider-sweep-duration: 6s;

  /* Phone screen transition */
  --screen-offset: 28px;
  --screen-duration: 0.45s;
  --screen-easing: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Z-index */
  --z-toast: 300;
  --z-nav: 100;
  --z-cookie: 200;
  --z-hero-content: 15;
  --z-hero-background: 10;
  --z-phone: 8;
}