/* ═══════════════════════════════════════════════════════════════
   SURIAPP — tokens.css  (B2)
   Colores por ROL. Se carga ANTES que cualquier otro CSS de la app.

   - :root               → modo claro (por defecto, ADR-003)
   - [data-theme="dark"] → modo oscuro (opcional, lo elige el usuario)

   Componentes nuevos: usar SOLO los --color-*.
   Los nombres viejos (--dark2, --text1, --sky…) quedan como alias
   para no romper el CSS existente; se migran de a poco (B5).
   Contrastes medidos (WCAG): ver docs/Sistema de diseño.md.
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* Marca y acción principal */
  --color-primary:       #6D28D9;   /* texto/links: 7,1:1 sobre blanco */
  --color-primary-hover: #5B21B6;
  --color-primary-bg:    #7B3FE4;   /* fondo de botón: blanco encima 5,7:1 */
  --color-primary-bg-hover: #6D28D9;
  --color-on-primary:    #FFFFFF;
  --color-primary-soft:  rgba(123, 63, 228, .10);

  /* Superficies */
  --color-bg:        #F5F6FA;   /* fondo de la página */
  --color-surface:   #FFFFFF;   /* cards, sidebar, topbar, modales */
  --color-surface-2: #F8F9FC;   /* inputs, filas alternas */
  --color-surface-3: #EEF0F5;   /* hover, chips, barras */
  --color-overlay:   rgba(15, 23, 42, .45);

  /* Bordes */
  --color-border:        rgba(15, 23, 42, .10);
  --color-border-strong: rgba(15, 23, 42, .18);
  --color-border-input:  #8C95A6;   /* contorno de campos: 3:1 (WCAG 1.4.11) */

  /* Texto */
  --color-text:           #0F172A;   /* títulos y datos: 16,5:1 */
  --color-text-secondary: #334155;   /* párrafos: 9,6:1 */
  --color-text-muted:     #5B6478;   /* labels, ayudas: 5,2:1+ */

  /* Estados (texto ≥ 4,5:1 sobre --color-bg y --color-surface) */
  --color-success: #15803D;  --color-success-soft: rgba(22, 163, 74, .12);
  --color-success-strong: #166534;   /* texto sobre -soft (badges): 4,5:1+ */
  --color-warning: #B45309;  --color-warning-soft: rgba(217, 119, 6, .12);
  --color-warning-strong: #92400E;
  --color-danger:  #B91C1C;  --color-danger-soft:  rgba(220, 38, 38, .10);
  --color-info:    #0369A1;  --color-info-soft:    rgba(2, 132, 199, .10);

  /* Sombras y radios */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, .08);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* ── Alias viejos (modo claro) ─────────────────────────────── */
  --violet:  #7B3FE4;
  --violet2: var(--color-primary);
  --blue:    #1565C0;
  --sky:     var(--color-info);
  --cyan:    #0E7490;
  --orange:  #C2410C;
  --gold:    var(--color-warning);
  --green:   var(--color-success);
  --red:     #DC2626;
  --yellow:  var(--color-warning);
  --dark:    var(--color-bg);
  --dark1:   var(--color-surface);
  --dark2:   var(--color-surface);
  --dark3:   var(--color-surface-2);
  --dark4:   var(--color-surface-3);
  --border:  var(--color-border);
  --border2: var(--color-border-strong);
  --text1:   var(--color-text);
  --text2:   var(--color-text-secondary);
  --text3:   var(--color-text-muted);
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-primary:       #A97BFF;
  --color-primary-hover: #C4A3FF;
  --color-primary-bg:    #7B3FE4;
  --color-primary-bg-hover: #6D28D9;
  --color-on-primary:    #FFFFFF;
  --color-primary-soft:  rgba(123, 63, 228, .20);

  --color-bg:        #0F1120;
  --color-surface:   #1A1D30;
  --color-surface-2: #20233A;
  --color-surface-3: #272B42;
  --color-overlay:   rgba(0, 0, 0, .60);

  --color-border:        rgba(255, 255, 255, .07);
  --color-border-strong: rgba(255, 255, 255, .12);
  --color-border-input:  #62698C;

  --color-text:           #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-text-muted:     #8A94A8;   /* B1: 4,5:1+ sobre todas las superficies */

  --color-success: #22C55E;  --color-success-soft: rgba(34, 197, 94, .15);
  --color-success-strong: #22C55E;
  --color-warning: #F59E0B;  --color-warning-soft: rgba(245, 158, 11, .15);
  --color-warning-strong: #F59E0B;
  --color-danger:  #F87171;  --color-danger-soft:  rgba(239, 68, 68, .15);
  --color-info:    #29B6F6;  --color-info-soft:    rgba(41, 182, 246, .15);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .30);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .35);

  /* ── Alias viejos (valores originales del modo oscuro) ─────── */
  --violet:  #7B3FE4;
  --violet2: #A97BFF;   /* B5.6: = --color-primary, 4,5:1+ como texto */
  --blue:    #1565C0;
  --sky:     #29B6F6;
  --cyan:    #00E5FF;
  --orange:  #FF8F00;
  --gold:    #FFC107;
  --green:   #22C55E;
  --red:     #EF4444;
  --yellow:  #F59E0B;
  --dark:    #0F1120;
  --dark1:   #141628;
  --dark2:   #1A1D30;
  --dark3:   #20233A;
  --dark4:   #272B42;
}