/* ============================================================
   DESIGN SYSTEM — tokens
   ============================================================ */

:root {
  color-scheme: dark;

  /* Contraste y capas compartidas */
  --on-accent: #fff;
  --backdrop: rgba(0,0,0,.55);
  --mask-opaque: #000;

  /* Superficies (oscuro = tema principal) */
  --app-bg:        #080b13;
  --surface-1:     #121826;
  --surface-2:     #0c111c;
  --surface-3:     #171f30;
  --surface-hover: #1b2436;
  --sidebar-bg:    #0e1320;

  /* Texto */
  --txt:        #eef1f7;
  --txt-dim:    #9aa4bb;
  --txt-faint:  #7a86a0;

  /* Bordes */
  --stroke:        rgba(255,255,255,.07);
  --stroke-strong: rgba(255,255,255,.14);

  /* Acento */
  --accent:      #4f8cff;
  --accent-2:    #2f6fe0;
  --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-2));

  /* Estados */
  --success:        #34d399;
  --success-bg:     rgba(52,211,153,.12);
  --success-border: rgba(52,211,153,.35);
  --success-text:   #4fe3ae;

  --warning:        #f5a524;
  --warning-bg:     rgba(245,165,36,.12);
  --warning-border: rgba(245,165,36,.35);
  --warning-text:   #f7b84f;

  --danger:        #f4506b;
  --danger-bg:     rgba(244,80,107,.12);
  --danger-border: rgba(244,80,107,.35);
  --danger-text:   #f77187;

  --info:        var(--accent);
  --info-bg:     rgba(79,140,255,.12);
  --info-border: rgba(79,140,255,.35);
  --info-text:   #7aa6ff;

  /* Series de datos: las gráficas nunca introducen colores fuera del sistema. */
  --chart-1: var(--accent);
  --chart-2: var(--danger);
  --chart-3: var(--success);
  --chart-4: var(--warning);
  --chart-5: #a78bfa;
  --chart-6: #22d3ee;
  --chart-7: #fb923c;
  --chart-8: #f472b6;
  --chart-9: #94a3b8;
  --chart-10: #4ade80;

  /* Radios */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* Sombras */
  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 10px 26px -14px rgba(0,0,0,.55);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.03);
  --shadow-btn:  0 6px 16px -4px rgba(79,140,255,.45);

  --blur: 14px;
}

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

  --app-bg:        #eef1f6;
  --surface-1:     #ffffff;
  --surface-2:     #f5f7fb;
  --surface-3:     #eef1f7;
  --surface-hover: #e7ebf3;
  --sidebar-bg:    #ffffff;

  --txt:       #131826;
  --txt-dim:   #565f75;
  --txt-faint: #5f6b82;

  /* Tonos más profundos para texto pequeño y badges sobre fondos claros. */
  --success-text: #087a50;
  --warning-text: #9a5a00;
  --danger-text:  #bd2845;
  --info-text:    #1a5fc4;

  --stroke:        rgba(15,23,42,.08);
  --stroke-strong: rgba(15,23,42,.16);

  --shadow-card: 0 1px 2px rgba(15,23,42,.05), 0 10px 24px -16px rgba(15,23,42,.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.6);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--app-bg);
  color: var(--txt);
  font-family: 'Instrument Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; }

svg { display: block; }

::selection { background: var(--accent); color: var(--on-accent); }