/*  ─────────────────────────────────────────────────────────────────────────
 *  Design tokens (sistema visual Rauda · v2)
 *  Sigue la guía UX/UI del 12 may 2026:
 *    - escala de espaciado en múltiplos de 4px
 *    - radios discretos (sm/md/lg)
 *    - sombras planas (card / popover)
 *    - paleta neutra moderna + escala semántica "Slate & Sage" 5 pasos
 *
 *  Convenciones:
 *    --color-*    capa neutra y semántica (texto, fondo, marca, status)
 *    --space-*    espaciado en múltiplos de 4px
 *    --radius-*   esquinas
 *    --shadow-*   elevación
 *    --font-*     escala tipográfica
 *
 *  Los alias --stiga-* y --rauda-* se mantienen para compatibilidad con CSS
 *  y JS existentes; **no** añadir nuevos alias, usar siempre --color-/-space-.
 *  ─────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Neutrales (gris-azul moderno) ──────────────────────────────────── */
  --color-bg:              #F6F7F9;
  --color-surface:         #FFFFFF;
  --color-surface-alt:     #F8FAFC;
  --color-text-primary:    #111827;
  --color-text-secondary:  #6B7280;
  --color-text-muted:      #94A3B8;
  --color-border:          #E5E7EB;
  --color-border-strong:   #CBD5E1;

  /* ── Marca ──────────────────────────────────────────────────────────── */
  --color-brand:           #3B5BDB;
  --color-brand-hover:     #2F48B3;
  --color-brand-soft:      rgba(59, 91, 219, 0.10);

  /* ── Semántica "Slate & Sage" (escala 5 pasos) ──────────────────────── */
  --color-success:         #2D6B62;
  --color-success-bg:      #E0EEEC;
  --color-success-solid:   #8DBCB5;

  --color-warning:         #8A4A2A;
  --color-warning-bg:      #F8EDE3;
  --color-warning-solid:   #E8C4A8;

  --color-danger:          #7A2A2A;
  --color-danger-bg:       #F5E8E8;
  --color-danger-solid:    #D9A8A8;

  --color-excelente-solid: #A8C5A0;
  --color-excelente-bg:    #E8F1E5;
  --color-excelente-text:  #3D6B44;

  --color-regular-solid:   #E8D5A3;
  --color-regular-bg:      #F5EFE0;
  --color-regular-text:    #7A6020;

  /* Familia pizarra (donuts y badges de categoría) */
  --color-slate-1:         #A5B8D8;
  --color-slate-2:         #C4C8E0;
  --color-slate-3:         #B8B8CC;
  --color-slate-bg:        #EEF0F5;
  --color-slate-text:      #4A5070;
  --color-slate-1-bg:      #EDF1F8;
  --color-slate-1-text:    #3D5280;

  /* ── Espaciado (escala 4px) ─────────────────────────────────────────── */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */

  /* ── Radios ────────────────────────────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ── Sombras ────────────────────────────────────────────────────────── */
  --shadow-card:    0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.06);
  --shadow-card-hover: 0 4px 12px rgba(17, 24, 39, 0.08);
  --shadow-popover: 0 8px 20px rgba(17, 24, 39, 0.10), 0 2px 6px rgba(17, 24, 39, 0.05);

  /* ── Tipografía ─────────────────────────────────────────────────────── */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --font-size-xs:  0.75rem;
  --font-size-sm:  0.875rem;
  --font-size-md:  1rem;
  --font-size-lg:  1.125rem;
  --font-size-xl:  1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;

  /*  ─────────────────────────────────────────────────────────────────────
   *  Alias retro-compat — no usar en CSS nuevo
   *  ───────────────────────────────────────────────────────────────────── */
  --stiga-accent:        var(--color-brand);
  --stiga-accent-hover:  var(--color-brand-hover);
  --stiga-black:         var(--color-text-primary);
  --stiga-grey-text:     var(--color-text-secondary);
  --stiga-background:    var(--color-bg);
  --stiga-grey-light:    var(--color-border);
  --stiga-white:         var(--color-surface);
  --stiga-font-sans:     var(--font-sans);
  --stiga-font-mono:     var(--font-mono);
  --stiga-text-sm:       var(--font-size-xs);
  --stiga-text-base:     var(--font-size-sm);
  --stiga-text-md:       var(--font-size-md);
  --stiga-text-xl:       var(--font-size-2xl);
  --stiga-text-2xl:      var(--font-size-3xl);
  --stiga-text-3xl:      var(--font-size-4xl);
  --stiga-space-1:       var(--space-1);
  --stiga-space-2:       var(--space-2);
  --stiga-space-3:       var(--space-3);
  --stiga-space-4:       var(--space-4);
  --stiga-space-6:       var(--space-6);
  --stiga-radius-sm:     var(--radius-sm);
  --stiga-radius-md:     var(--radius-md);
  --stiga-radius-xl:     var(--radius-lg);

  /* Aliases semánticos viejos */
  --rauda-excelente:        var(--color-excelente-solid);
  --rauda-excelente-bg:     var(--color-excelente-bg);
  --rauda-excelente-text:   var(--color-excelente-text);
  --rauda-bueno:            var(--color-success-solid);
  --rauda-bueno-bg:         var(--color-success-bg);
  --rauda-bueno-text:       var(--color-success);
  --rauda-regular:          var(--color-regular-solid);
  --rauda-regular-bg:       var(--color-regular-bg);
  --rauda-regular-text:     var(--color-regular-text);
  --rauda-bajo:             var(--color-warning-solid);
  --rauda-bajo-bg:          var(--color-warning-bg);
  --rauda-bajo-text:        var(--color-warning);
  --rauda-critico:          var(--color-danger-solid);
  --rauda-critico-bg:       var(--color-danger-bg);
  --rauda-critico-text:     var(--color-danger);
  --rauda-pizarra-1:        var(--color-slate-1);
  --rauda-pizarra-1-bg:     var(--color-slate-1-bg);
  --rauda-pizarra-1-text:   var(--color-slate-1-text);
  --rauda-pizarra-2:        var(--color-slate-2);
  --rauda-pizarra-3:        var(--color-slate-3);
  --rauda-pizarra-bg:       var(--color-slate-bg);
  --rauda-pizarra-text:     var(--color-slate-text);
}