/* EasyProfe — design tokens
   Mapea V1 (dark) y V2 (light) del bundle de Claude Design.
   Tokens semánticos: el toggle dark/light sólo cambia las vars,
   los componentes nunca leen colores hardcoded.
*/

:root {
  /* Brand palette compartida ------------------------------------------- */
  --brand-navy:      #0F172A;
  --brand-navy-2:    #1B2741;
  --brand-teal-700:  #0A7D94;
  --brand-teal-500:  #0E9DB8;
  --brand-teal-400:  #22B8D2;
  --brand-teal-100:  #E0F5F9;
  --brand-teal-50:   #F0FAFC;
  --brand-success:   #059669;
  --brand-danger:    #DC2626;
  --brand-amber:     #D97706;
  --brand-violet:    #7C3AED;
  --brand-magenta:   #DB2777;

  /* Shape + density ---------------------------------------------------- */
  --radius:          10px;
  --radius-sm:       6px;
  --font-body:       'Inter', system-ui, -apple-system, sans-serif;
  --font-display:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* ── V2 · BALANCEADA (light) — default ─────────────────────────────── */
:root,
:root.light {
  --bg:              #FFFFFF;
  --surface:         #F7F7F8;
  --surface-2:       #F0F1F3;
  --border:          #E5E7EB;
  --border-strong:   #D4D7DD;
  --text:            #0F172A;
  --text-muted:      #64748B;
  --text-dim:        #94A3B8;
  --accent:          #0A7D94;             /* teal700 — serio sobre claro */
  --accent-strong:   #0E9DB8;
  --accent-soft:     #E0F5F9;
  --accent-line:     rgba(10, 125, 148, 0.28);
  --success:         #047857;
  --success-soft:    #D1FAE5;
  --danger:          #DC2626;
  --warn:            #D97706;
  --cta:             #0F172A;             /* navy en light */
  --cta-text:        #FFFFFF;
  --shadow:          0 1px 0 rgba(15, 23, 42, 0.03), 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* ── V1 · CONSERVADORA (dark) ──────────────────────────────────────── */
:root.dark {
  --bg:              #0B1220;
  --surface:         #111A2E;
  --surface-2:       #18243D;
  --border:          #1F2C47;
  --border-strong:   #2C3B5A;
  --text:            #E8EEF8;
  --text-muted:      #94A3B8;
  --text-dim:        #64748B;
  --accent:          #0E9DB8;             /* teal500 brilla sobre dark */
  --accent-strong:   #22B8D2;
  --accent-soft:     rgba(14, 157, 184, 0.14);
  --accent-line:     rgba(14, 157, 184, 0.35);
  --success:         #22C55E;
  --success-soft:    rgba(34, 197, 94, 0.14);
  --danger:          #F87171;
  --warn:            #F59E0B;
  --cta:             #0071E3;             /* azul "interaction primary" — separado del teal "marca" */
  --cta-text:        #FFFFFF;
  --shadow:          0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Auto-dark si no hay class explícita ---------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg:              #0B1220;
    --surface:         #111A2E;
    --surface-2:       #18243D;
    --border:          #1F2C47;
    --border-strong:   #2C3B5A;
    --text:            #E8EEF8;
    --text-muted:      #94A3B8;
    --text-dim:        #64748B;
    --accent:          #0E9DB8;
    --accent-strong:   #22B8D2;
    --accent-soft:     rgba(14, 157, 184, 0.14);
    --accent-line:     rgba(14, 157, 184, 0.35);
    --success:         #22C55E;
    --success-soft:    rgba(34, 197, 94, 0.14);
    --danger:          #F87171;
    --warn:            #F59E0B;
    --cta:             #0071E3;
    --cta-text:        #FFFFFF;
    --shadow:          0 1px 0 rgba(255, 255, 255, 0.03), 0 8px 24px rgba(0, 0, 0, 0.4);
  }
}