/* Tema de marca. Para cambiar colores, radios, sombras, espaciados o fuente, se edita solo este archivo. */
:root {
  color-scheme: dark;

  /* Tipografía */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Base (casi negro azulado) y superficies */
  --color-bg: #07070f;
  --color-surface: #131225;
  --color-surface-raised: #1a1933;
  --color-field: #0e0d1c;

  /* Bordes */
  --color-border: rgb(255 255 255 / 0.09);
  --color-border-strong: rgb(255 255 255 / 0.2);

  /* Texto (todos pasan AA sobre --color-surface) */
  --color-text: #f4f3fb;
  --color-text-muted: #bcb9d3;
  --color-text-faint: #a5a2c1;

  /* Acento: violeta de marca. El magenta aparece solo como final de degradado. */
  --color-accent: #8b5cf6;
  --color-accent-strong: #7c3aed;
  --color-magenta: #a21caf;
  --color-accent-soft: rgb(139 92 246 / 0.14);
  --color-accent-ring: rgb(139 92 246 / 0.38);
  --color-on-accent: #ffffff;
  --gradient-accent: linear-gradient(135deg, var(--color-accent-strong) 0%, var(--color-magenta) 100%);

  /* Estados */
  --color-danger: #ff9bad;
  --color-danger-border: rgb(255 155 173 / 0.6);
  --color-danger-soft: rgb(255 155 173 / 0.08);
  --color-warning: #f3c969;

  /* Forma */
  --radius-card: 20px;
  --radius-control: 14px;
  --radius-small: 10px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-card: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 28px 70px -28px rgb(0 0 0 / 0.75);
  --shadow-button: 0 10px 28px -10px rgb(124 58 237 / 0.7);

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --card-max: 640px;
  --card-padding: 24px;
  --card-padding-wide: 40px;

  /* Fondo: grilla sutil */
  --grid-size: 56px;
  --grid-line: rgb(255 255 255 / 0.035);

  /* Luces del fondo y aro de la tarjeta (Lite: sin aro, borde neutro) */
  --glow-a: rgb(139 92 246 / 0.24);
  --glow-b: rgb(192 38 211 / 0.14);
  --card-ring: none;

  /* Movimiento (150 a 400 ms) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 350ms;
}

/* Variante PRO (<html data-theme="pro">): mismo sistema, un tono más premium.
   Segundo tono de acento más magenta y aro con degradado en la tarjeta. Solo se sobrescribe lo necesario. */
[data-theme="pro"] {
  --color-accent: #a078fb;
  --color-magenta: #be22cf;
  --color-accent-soft: rgb(160 120 251 / 0.16);
  --color-accent-ring: rgb(160 120 251 / 0.42);
  --glow-a: rgb(139 92 246 / 0.32);
  --glow-b: rgb(217 70 239 / 0.2);
  --card-ring: linear-gradient(135deg, rgb(167 139 250 / 0.75), rgb(139 92 246 / 0.12) 38%, rgb(217 70 239 / 0.1) 62%, rgb(217 70 239 / 0.6));
  --shadow-card: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 28px 70px -28px rgb(0 0 0 / 0.75), 0 0 80px -30px rgb(139 92 246 / 0.45);
}