/* =============================================================
   tokens.css — Design System Universidad.io
   Sprint 35 fix-3 — Fondo negro puro + glass premium
   ============================================================= */

/*
  REGLA DE COLOR DE TEXTO — Sprint 35 fix-2 (vinculante)
  ---------------------------------------------------------
  - Números grandes (KPIs, contadores, niveles, U Coins): SIEMPRE BLANCOS (var(--text)).
  - Títulos h1-h6: SIEMPRE BLANCOS.
  - Labels y subtítulos: gris claro (var(--text-2)) o gris medio (var(--text-3)).
  - Eyebrows uppercase: gris (var(--text-3)).
  - Color SOLAMENTE permitido en:
      * Deltas pequeños (▲ +25 verde, ▼ -12 rojo, máximo fs-xs/sm).
      * Barras de progreso (azul accent, dorado para nivel, verde para sorteos).
      * Badges semánticos (Nv.1, Borrador, Finalizado, etc.) con tipografía pequeña.
      * Iconos decorativos pequeños (16-24px).
      * Links activos del menú (color azul accent).
      * Background de botones primarios (azul accent).
      * Indicadores semánticos puntuales (dots de estado, timeline).
  - PROHIBIDO:
      * Números grandes en color (violeta, azul, dorado, verde).
      * Títulos en color (violeta, azul, dorado, verde).
      * Texto de label "Plan Anual" / "Inicio activo" en violeta.
      * Más de 2-3 colores semánticos visibles a la vez en una zona.
*/

:root,
[data-theme="dark"] {
  /* ── Backgrounds (negro puro para glass real) ── */
  --bg:        #000000;
  --bg-1:      #0A0A0A;
  --bg-2:      #1A1A1A;
  --bg-panel:  #141414;
  --surface:   #141414;
  --surface-2: #1C1C1C;
  --surface-3: #242424;

  /* ── Glass surfaces — fondo negro + blobs blancos detrás ── */
  --glass-bg:        rgba(255, 255, 255, 0.04);
  --glass-bg-strong: rgba(255, 255, 255, 0.07);
  --glass-bg-soft:   rgba(255, 255, 255, 0.025);
  --glass-border:    rgba(255, 255, 255, 0.10);
  --glass-border-2:  rgba(255, 255, 255, 0.16);
  --glass-blur:      blur(24px) saturate(140%);
  --glass-blur-soft: blur(14px) saturate(130%);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.09);

  /* ── Borders ── */
  --border:        rgba(255, 255, 255, 0.08);
  --border-2:      rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.22);

  /* ── Text ── */
  --text:           #FFFFFF;
  --text-2:         #CDCDCD;
  --text-3:         #B8B8B8;
  --text-4:         #5E5E5E;
  --text-on-accent: #FFFFFF;

  /* ── Accent: NEGRO (cobalto eliminado) ── */
  --ac:       #1A1A1A;
  --ac-2:     #000000;
  --ac-3:     #2E2E2E;
  --ac-soft:  rgba(255, 255, 255, 0.08);
  --ac-glow:  rgba(0, 0, 0, 0.45);
  --ac-on-dark: #E6E6E6;
  --ac-border: rgba(255, 255, 255, 0.34);
  --ac-elev:   #262626;
  --ac-grad:  linear-gradient(135deg, #1A1A1A 0%, #000000 100%);
  --ac-grad-strong: linear-gradient(135deg, #2E2E2E 0%, #000000 100%);

  /* ── Semantic: Success ── */
  --success:      #4ADE80;
  --success-2:    #22C55E;
  --success-soft: rgba(74, 222, 128, 0.16);
  --success-glow: rgba(74, 222, 128, 0.45);

  /* ── Semantic: Warning ── */
  --warning:      #FFC857;
  --warning-2:    #FFB000;
  --warning-soft: rgba(255, 200, 87, 0.16);
  --warning-glow: rgba(255, 200, 87, 0.45);

  /* ── Semantic: Danger ── */
  --danger:       #FF5C7A;
  --danger-2:     #FF3D5F;
  --danger-soft:  rgba(255, 92, 122, 0.16);
  --danger-glow:  rgba(255, 92, 122, 0.45);

  /* ── Semantic: Info ── */
  --info:         #E6E6E6;
  --info-soft:    rgba(255, 255, 255, 0.10);

  /* ── Especiales del proyecto ── */
  /* GOLD: SOLO para barra de subir nivel (.uio-progress--gold). */
  /* NUNCA en backgrounds, cards, botones o textos generales.   */
  --gold:        #FFC857;
  --gold-2:      #FFB000;
  --gold-grad:   linear-gradient(90deg, #FFD773 0%, #FFB000 100%);
  --gold-glow:   rgba(255, 200, 87, 0.50);

  /* GREEN-BAR: SOLO para barra de progreso de sorteos (.uio-progress--green). */
  /* NUNCA en backgrounds, cards, botones o textos generales.                   */
  --green-bar:   #4ADE80;
  --green-bar-2: #22C55E;
  --green-grad:  linear-gradient(90deg, #6EE7A0 0%, #22C55E 100%);
  --green-glow:  rgba(74, 222, 128, 0.50);

  /* ── Shadows ── */
  --sh-xs: 0 1px 2px rgba(0,0,0,0.20);
  --sh-sm: 0 2px 8px rgba(0,0,0,0.28);
  --sh-md: 0 8px 24px rgba(0,0,0,0.32);
  --sh-lg: 0 18px 50px rgba(0,0,0,0.42);
  --sh-xl: 0 30px 80px rgba(0,0,0,0.50);
  --sh-glow-ac:    0 0 0 1px var(--ac-soft), 0 8px 28px var(--ac-glow);
  --sh-glow-gold:  0 0 0 1px rgba(255,200,87,0.18), 0 8px 28px var(--gold-glow);
  --sh-glow-green: 0 0 0 1px rgba(74,222,128,0.18), 0 8px 28px var(--green-glow);

  /* ── Radii ── */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 18px;
  --r-5: 22px;
  --r-pill: 9999px;

  /* ── Spacing (escala 4px) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;

  /* ── Tipografia ── */
  --ff: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ff-mono: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  44px;
  --lh-tight: 1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;
  --tracking-tight: -0.01em;
  --tracking-wide:  0.08em;

  /* ── Layout ── */
  --maxw:        1280px;
  --maxw-narrow: 920px;
  --maxw-wide:   1440px;
  --sw-collapsed:   72px;
  --sw-expanded:   256px;
  --header-h:       64px;
  --header-h-mobile: 56px;
  --header-h-mobile-2: 44px;
  --bottomnav-h:    68px;

  /* ── Transitions ── */
  --t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --t-base: 220ms cubic-bezier(.4,0,.2,1);
  --t-slow: 360ms cubic-bezier(.4,0,.2,1);

  /* ── Z-index ── */
  --z-sidebar:   50;
  --z-header:    60;
  --z-bottomnav: 60;
  --z-drawer:    80;
  --z-sheet:     85;
  --z-modal:     90;
  --z-toast:     95;
  --z-tooltip:   99;
}