/* Generated by Brandwright — do not edit directly. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
/* "Recoleta" (custom / self-hosted) — not auto-imported. Bring your own: load it via your foundry kit or a self-hosted @font-face before relying on the variable below. */
:root {
  --color-deep-navy: #050A3D;
  --color-vivid-purple: #7B2FF2;
  --color-electric-blue: #2E5BFF;
  --color-hot-pink: #EF3B9A;
  --color-orange: #FF8A1A;
  --color-pale-lavender: #E9E6F8;
  --color-role-primary: #7B2FF2;
  --color-role-accent: #EF3B9A;
  --color-role-neutral: #FF8A1A;
  --color-role-surface: #E9E6F8;
  --color-role-text: #050A3D;
  --color-role-muted: #2952e6;
  --gradient-brand: radial-gradient(at 20% 30%, #7B2FF2 0px, rgba(123, 47, 242, 0) 55%), radial-gradient(at 78% 25%, #EF3B9A 0px, rgba(239, 59, 154, 0) 50%), radial-gradient(at 50% 80%, #2E5BFF 0px, rgba(46, 91, 255, 0) 60%), radial-gradient(at 85% 75%, #FF8A1A 0px, rgba(255, 138, 26, 0) 45%), linear-gradient(#E9E6F8, #E9E6F8);
  --font-heading: "Recoleta", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-size-display: 2.441rem;
  --line-height-display: 1.1;
  --font-weight-display: 700;
  --font-size-h1: 1.953rem;
  --line-height-h1: 1.15;
  --font-weight-h1: 700;
  --font-size-h2: 1.563rem;
  --line-height-h2: 1.2;
  --font-weight-h2: 600;
  --font-size-h3: 1.25rem;
  --line-height-h3: 1.3;
  --font-weight-h3: 600;
  --font-size-body: 1rem;
  --line-height-body: 1.5;
  --font-weight-body: 400;
  --font-size-caption: 0.8rem;
  --line-height-caption: 1.45;
  --font-weight-caption: 400;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.16);
}

/* Dark theme — auto via OS setting. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-role-primary: #7B2FF2;
    --color-role-accent: #EF3B9A;
    --color-role-neutral: #191e4d;
    --color-role-surface: #050A3D;
    --color-role-text: #E9E6F8;
    --color-role-muted: #587cff;
  }
}

/* Dark theme — forced via <html data-theme="dark">. */
[data-theme="dark"] {
  --color-role-primary: #7B2FF2;
  --color-role-accent: #EF3B9A;
  --color-role-neutral: #191e4d;
  --color-role-surface: #050A3D;
  --color-role-text: #E9E6F8;
  --color-role-muted: #587cff;
}
