:root {
  /* ── Colors (design-review v2) ── */
  --color-bg-primary: #161618;
  --color-bg-secondary: #222226;
  --color-bg-tertiary: #2c2c30;
  --color-text-primary: #f4f4f5;
  --color-text-secondary: #8e8e93;
  --color-placeholder: #636366;
  --color-accent: #5b7cff;
  --color-star: #ffd60a;
  --color-star-inactive: #636366;
  --color-destructive: #ff453a;
  --color-success: #32d74b;
  --color-separator: #2e2e32;
  --color-line: rgba(255, 255, 255, 0.08);

  /* ── Profile avatar colors ── */
  --color-profile-blue: #5b7cff;
  --color-profile-green: #30d158;
  --color-profile-orange: #ff9f0a;
  --color-profile-purple: #bf5af2;
  --color-profile-yellow: #e8c547;
  --color-profile-gray: #636366;

  /* ── Spacing ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* ── Border radius ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* ── Typography ── */
  --font-family: "Manrope", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --font-title-1-size: 28px;
  --font-title-1-line: 34px;
  --font-title-1-weight: 800;

  --font-title-2-size: 22px;
  --font-title-2-line: 28px;
  --font-title-2-weight: 700;

  --font-headline-size: 17px;
  --font-headline-line: 22px;
  --font-headline-weight: 600;

  --font-body-size: 17px;
  --font-body-line: 22px;
  --font-body-weight: 400;

  --font-subhead-size: 15px;
  --font-subhead-line: 20px;
  --font-subhead-weight: 400;

  --font-footnote-size: 13px;
  --font-footnote-line: 18px;
  --font-footnote-weight: 400;

  --font-caption-size: 12px;
  --font-caption-line: 16px;
  --font-caption-weight: 400;

  /* ── Layout (iPhone-first PWA) ── */
  --viewport-width: 440px;
  --viewport-height: 956px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);

  /* ── Interaction states ── */
  --color-accent-hover: #7391ff;
  --color-accent-pressed: #3d5fd9;
  --color-surface-hover: #2a2a2e;
  --color-surface-pressed: #323238;
  --color-control-fill: #3a3a40;
  --color-control-fill-strong: #45454c;

  /* ── Animation ── */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  /* Product UI: ease-out, no bounce */
  --easing-out: cubic-bezier(0.16, 1, 0.3, 1);
  --easing-spring: var(--easing-out);
  --easing-default: ease;
}