/* ============================================================================
   EMBAJADORES FC — Tokens de marca
   Fuente única de verdad para color, tipografía y espaciado.
   Cargar en las tres apps: <link rel="stylesheet" href="/brand/tokens.css">
   ========================================================================== */
:root {
  /* --- Marca (azul Millonarios FC) --- */
  --azul-millonarios: #162786;  /* AZUL PROTAGONISTA (Millos, royal vivo) */
  --azul-marino:  #162786;   /* primario (azul Millonarios) */
  --azul-cielo:   #2f43cf;   /* secundario (royal más claro) */
  --dorado:       #C9A54A;   /* acento sobre oscuro */
  --dorado-legible:#9C7A22;  /* acento legible sobre blanco */
  --blanco:       #FFFFFF;
  --tinta:        #0B1220;   /* texto sobre claro */

  /* --- Neutrales --- */
  --gris-100: #F4F6FA;
  --gris-200: #E6EAF1;
  --gris-400: #5b6577;
  --gris-600: #5B6577;
  --gris-700: #333B4D;

  /* --- Estados --- */
  --exito:  #1F9D57;
  --alerta: #E0A400;
  --error:  #D64545;

  /* --- Tipografía --- */
  --fuente-titulo: 'Oswald', 'Teko', sans-serif;
  --fuente-texto:  'Satoshi', system-ui, -apple-system, sans-serif;

  /* --- Radios y sombras --- */
  --radio-sm: 6px;
  --radio-md: 12px;
  --radio-lg: 20px;
  --sombra-1: 0 2px 8px rgba(230,234,241, 0.08);
  --sombra-2: 0 8px 30px rgba(230,234,241, 0.15);
  /* Sombra de tarjeta (elevación) — CLARO: suave y azulada */
  --card-shadow: 0 6px 20px rgba(22,39,134, .08), 0 1px 3px rgba(22,39,134, .06);

  /* --- Espaciado (escala de 4) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; --sp-10: 64px;

  /* --- TEMA (claro por defecto). El modo oscuro los sobrescribe abajo. --- */
  --bg: #eef1f6;            /* fondo de página */
  --bg-2: #ffffff;          /* esquina clara del degradado */
  --bg-3: #e6eaf1;          /* esquina del degradado */
  --surface: #ffffff;       /* tarjetas */
  --surface-2: #f4f6fa;     /* tarjeta secundaria / inputs */
  --border: #e3e8f0;        /* bordes */
  --text: #162786;          /* texto primario = AZUL MILLONARIOS sobre claro */
  --text-2: #5b6577;        /* texto secundario */
  --text-3: #333b4d;        /* texto terciario */
  --ink-rgb: 11 18 32;      /* hairlines/fills translúcidos sobre claro */
  --panel-rgb: 230 234 241; /* paneles claros translúcidos */
  --surf-rgb: 255 255 255;  /* superficies translúcidas (barra/menú/auth) */
}

/* ===================== MODO OSCURO (el azul del club) ===================== */
html[data-theme="dark"] {
  /* Azul Millonarios SÓLIDO (royal vivo) + blanco */
  --bg: #162786;
  --bg-2: #162786;
  --bg-3: #101d5e;
  --surface: #21309b;     /* tarjetas: azul un punto más claro para dar relieve */
  --surface-2: #1a2780;
  --border: rgba(255,255,255,.20);
  --text: #ffffff;
  --text-2: #c9d1f5;
  --text-3: #e7ecff;
  --ink-rgb: 255 255 255;
  --panel-rgb: 22 39 134;   /* azul Millonarios translúcido */
  --surf-rgb: 22 39 134;    /* barras/menús en azul Millonarios */
  --card-shadow: 0 8px 24px rgba(0,0,0,.28);
}

/* Los tokens son estables (base clara). Cada app fija su propio fondo:
   - apps/web  usa fondo azul marino explícito (look oscuro por diseño)
   - apps/app y apps/crm usan fondo claro
   Así evitamos que el modo oscuro del sistema invierta el panel de datos. */