/* =============================================================
   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:      #060810;
  --bg-2:      #0A0D1A;
  --surface:   #0E1228;
  --surface-2: #131830;
  --surface-3: #181E38;

  /* ── 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:         #B8BFD9;
  --text-3:         #7C84A6;
  --text-4:         #555D80;
  --text-on-accent: #FFFFFF;

  /* ── Accent: AZUL COBALTO PURO (sin nada de violeta) ── */
  --ac:       #3D5AFE;
  --ac-2:     #2233CC;
  --ac-3:     #5870FF;
  --ac-soft:  rgba(61, 90, 254, 0.18);
  --ac-glow:  rgba(61, 90, 254, 0.45);
  --ac-grad:  linear-gradient(135deg, #3D5AFE 0%, #2233CC 100%);
  --ac-grad-strong: linear-gradient(135deg, #5870FF 0%, #2233CC 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:         #5BA9FF;
  --info-soft:    rgba(91, 169, 255, 0.16);

  /* ── 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;
}