:root {
  /* Brand — from app */
  --color-white: #ffffff;
  --color-ink: #030410;
  --color-ink-muted: rgba(3, 4, 16, 0.74);
  --color-primary: #3360f1;
  --color-accent: #8f33f1;

  /* Derived from app screens (not extra brand colors) */
  --color-primary-hover: #2b54e0;
  --color-primary-press: #1e4bd6;
  --color-primary-inactive: #b7c6fb;
  --color-primary-soft: rgba(51, 96, 241, 0.1);
  --color-accent-soft: rgba(143, 51, 241, 0.1);
  --color-accent-soft-strong: rgba(143, 51, 241, 0.16);
  --color-surface: #f4f4f6;
  --color-surface-press: #e8e8ec;
  --color-page: #f5f5f7;
  --color-border: rgba(3, 4, 16, 0.08);
  --color-border-strong: rgba(3, 4, 16, 0.14);
  --color-overlay: rgba(3, 4, 16, 0.45);
  --color-danger: #ff3b30;
  --color-star: #f5a623;

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

  --fw-regular: 400;
  --fw-medium: 510;
  --fw-semibold: 590;
  --fw-bold: 700;

  --fs-hero: 40px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 18px;
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.5;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  --shadow-modal: 0 16px 48px rgba(3, 4, 16, 0.16);
  --container: 1120px;
  --header-h: 64px;
  --ease: 0.16s ease;
}