:root {
  --color-paper: oklch(12.5% 0.009 268);
  --color-surface: oklch(18% 0.011 268);
  --color-glass: oklch(38% 0.035 270 / 0.16);
  --color-ink: oklch(95% 0.006 270);
  --color-muted-strong: oklch(76% 0.009 270);
  --color-muted: oklch(66% 0.009 270);
  --color-rule: oklch(30% 0.01 270);
  --color-rule-strong: oklch(38% 0.012 270);
  --color-pill-surface: oklch(22% 0.012 268 / 0.68);
  --color-pill-surface-hover: oklch(27% 0.014 268 / 0.78);
  --color-badge-surface: oklch(0% 0 0);
  --color-accent: oklch(76% 0.14 292);
  --color-accent-hover: oklch(80% 0.13 292);
  --color-accent-ink: oklch(14% 0.012 292);
  --color-focus: oklch(78% 0.16 292);
  --color-testflight-border: oklch(42% 0.012 270);
  --color-testflight-border-hover: oklch(70% 0.012 270);
  --color-claude: oklch(67% 0.15 39);
  --image-logo-placeholder: url("./assets/looper-logo-blur.png");
  --image-testflight-placeholder: url("./assets/testflight-badge-blur.png");

  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --text-sm: 0.95rem;
  --text-base: 1rem;
  --text-copy: 0.95rem;
  --text-copy-compact: 0.9rem;
  --text-trust: 0.82rem;
  --text-display-xs: 1.5rem;
  --text-display-s: clamp(1.58rem, 1.12rem + 1.45vw, 2rem);

  --leading-display: 1.14;
  --leading-body: 1.48;
  --leading-body-compact: 1.42;

  --page-width: 36rem;
  --measure-tight: 34rem;
  --measure-copy: 35rem;
  --size-brand-mark: 1.65rem;
  --logo-mark-size: 1rem;
  --logo-pill-height: 2rem;
  --carousel-width: clamp(11rem, 34vw, 18rem);
  --cta-height: 2.9rem;
  --cta-primary-width: 12rem;
  --cta-testflight-width: calc(var(--cta-height) * 2.9333);
  --carousel-edge-softness: 2rem;

  --rule-width: 1px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 0.2rem;

  --radius-icon: 0.3rem;
  --radius-pill: 999px;
  --radius-cta: 0.72rem;
  --radius-testflight: 0.42rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-carousel: 28s;

  --z-sticky: 200;
}

@media (prefers-color-scheme: light) {
  :root {
    --color-paper: #f2f2f7;
    --color-surface: #ffffff;
    --color-glass: rgb(255 255 255 / 0.72);
    --color-ink: #111114;
    --color-muted-strong: rgb(60 60 67 / 0.78);
    --color-muted: rgb(60 60 67 / 0.64);
    --color-rule: rgb(60 60 67 / 0.18);
    --color-rule-strong: rgb(60 60 67 / 0.24);
    --color-pill-surface: rgb(255 255 255 / 0.76);
    --color-pill-surface-hover: rgb(255 255 255 / 0.96);
    --color-badge-surface: #000000;
    --color-accent: #a99cff;
    --color-accent-hover: #b7adff;
    --color-accent-ink: #101015;
    --color-focus: #7b61ff;
    --color-testflight-border: rgb(60 60 67 / 0.34);
    --color-testflight-border-hover: rgb(60 60 67 / 0.52);
    --color-claude: #c96442;
  }
}