/* =========================================================
   SPNCE AI — Design Tokens
   Identidad: Concierge Financiero IA. Fondo oscuro premium fintech.
   Inspiración: Apple, Revolut, Stripe, Linear, Notion, Raycast.
   Primario #0B1F3A · Secundario #14D19B · Acento #7C5CFF
   ========================================================= */

:root {
  /* Marca */
  --brand-navy-900: #060e1c;
  --brand-navy-800: #0b1f3a;
  --brand-navy-700: #14294a;
  --brand-violet-500: #7c5cff;
  --brand-violet-400: #9b85ff;
  --brand-emerald-500: #14d19b;
  --brand-emerald-400: #3fe0b3;

  /* Alias usados en todo el sistema de componentes */
  --brand-blue-600: var(--brand-violet-500);
  --brand-blue-500: var(--brand-violet-400);
  --brand-cyan-400: var(--brand-emerald-500);
  --brand-cyan-500: var(--brand-emerald-400);

  --brand-gradient: linear-gradient(135deg, var(--brand-navy-800) 0%, var(--brand-violet-500) 58%, var(--brand-emerald-500) 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(124,92,255,.14) 0%, rgba(20,209,155,.10) 100%);

  /* Semántica */
  --color-success: #14d19b;
  --color-success-soft: rgba(20, 209, 155, 0.14);
  --color-warning: #f5a623;
  --color-warning-soft: rgba(245, 166, 35, 0.14);
  --color-danger: #ff5c72;
  --color-danger-soft: rgba(255, 92, 114, 0.14);
  --color-info: var(--brand-violet-500);

  /* Superficie — oscuro premium (marca por defecto) */
  --bg: #060b16;
  --bg-subtle: #0a1120;
  --bg-elevated: #0e1626;
  --surface: #131d31;
  --surface-hover: #1a2740;
  --border: #1f2c45;
  --border-strong: #2c3c5c;

  --text-primary: #f3f5fa;
  --text-secondary: #aab4c8;
  --text-muted: #6b7896;
  --text-on-brand: #ffffff;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 52px rgba(0, 0, 0, 0.5);
  --shadow-brand: 0 16px 40px rgba(124, 92, 255, 0.28);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;

  --container-max: 1200px;
  --nav-height: 76px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modo claro — disponible como alternativa, no es el look de marca por defecto */
[data-theme="light"] {
  --bg: #ffffff;
  --bg-subtle: #f5f7fb;
  --bg-elevated: #ffffff;
  --surface: #eef1f7;
  --surface-hover: #e3e8f2;
  --border: #e2e6ef;
  --border-strong: #cad0de;

  --text-primary: #0b1220;
  --text-secondary: #4b5568;
  --text-muted: #8791a5;
  --text-on-brand: #ffffff;

  --shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.06);
  --shadow-md: 0 4px 16px rgba(11, 31, 58, 0.08);
  --shadow-lg: 0 12px 40px rgba(11, 31, 58, 0.12);
  --shadow-brand: 0 12px 32px rgba(124, 92, 255, 0.22);

  --brand-gradient-soft: linear-gradient(135deg, rgba(124,92,255,.08) 0%, rgba(20,209,155,.08) 100%);
}