:root {
  /* Violeta */
  --violet-900: #1B1533;
  --violet-700: #3A2E9E;
  --violet-500: #6C4FE0;
  --violet-400: #8B74F2;
  --violet-200: #B9A9F7;
  --violet-100: #E4DDFB;

  /* Ámbar */
  --amber-500: #F2A22A;
  --amber-glow: #FFEB42;
  --amber-text: #D99A2E;

  /* Neutros */
  --bg-base: #050508;
  --surface-1: #0F0E20;
  --surface-2: #171530;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --text-primary: #FFFFFF;
  --text-secondary: #96979C;
  --text-muted: #6B6C72;

  /* Gradientes */
  --gradient-violet: linear-gradient(135deg, var(--violet-700) 0%, var(--violet-400) 100%);
  --gradient-hero-bg: linear-gradient(135deg, #1F1349 0%, #291E77 50%, #251848 100%);
  --glow-violet: radial-gradient(circle, rgba(139,116,242,0.35) 0%, rgba(139,116,242,0) 70%);
  --glow-amber: radial-gradient(circle, rgba(255,235,66,0.55) 0%, rgba(242,162,42,0) 70%);

  /* Gradiente ambiente hero (fondo detrás del isotipo, violeta → ámbar) */
  --gradient-hero-ambient: linear-gradient(
    135deg,
    #1F1349 0%,
    #291E77 35%,
    #3D2885 50%,
    #6B3A7A 65%,
    #8B4A5C 80%,
    #C67616 95%,
    #D97722 100%
  );

  /* Gradiente banner CTA final (violeta → ámbar) */
  --gradient-cta-ambient: linear-gradient(
    135deg,
    #1F1349 0%,
    #251848 25%,
    #3A2E6E 45%,
    #5A3D72 60%,
    #7D4A5A 75%,
    #A35B38 88%,
    #C67616 100%
  );

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Fuente */
  --font-sans: 'Inter', system-ui, sans-serif;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
}