:root {
  /* Brand palette (visual extraction from homepage) */
  --color-primary: #7764c5;
  --color-primary-tint: #f7f6fd;
  --color-secondary: #e04146;
  --color-accent: #0d0d0d;

  /* Neutrals */
  --color-neutral-0: #ffffff;
  --color-neutral-100: #f5f5f5;

  /* Semantics */
  --color-status-success-ink: #166534;
  --color-status-success-bg: #dcfce7;
  --color-status-success-border: #86efac;
  --color-status-warning-ink: #854d0e;
  --color-status-warning-bg: #fef9c3;
  --color-status-warning-border: #fde047;
  --color-status-info-ink: #1e40af;
  --color-status-info-bg: #dbeafe;
  --color-status-info-border: #93c5fd;
  --color-success: #2d9c5e;
  --color-warning: #f2994a;
  --color-error: #e0373b;

  /* Typography */
  --font-heading: "Poppins", "Montserrat", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --line-height-heading: 1.25;
  --line-height-body: 1.5;

  /* Type scale */
  --font-size-h1: 52px;
  --font-size-h2: 32px;
  --font-size-h3: 24px;
  --font-size-body: 16px;

  /* Spacing */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 30px;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-button-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
}