/* ==========================================================
   VARIABLES CSS — Design Tokens
   Diagnóstico de Madurez Digital
   ========================================================== */

:root {
  /* ── Colores principales ── */
  --color-bg:             #0B1120;
  --color-bg-card:        #0F172A;
  --color-bg-input:       #1E293B;
  --color-border:         #334155;
  --color-border-light:   #293548;

  /* ── Texto ── */
  --color-text-primary:   #F1F5F9;
  --color-text-secondary: #CBD5E1;
  --color-text-muted:     #94A3B8;
  --color-text-dim:       #64748B;
  --color-text-dark:      #475569;

  /* ── Acentos por dimensión ── */
  --color-teal:           #0D9488;
  --color-teal-light:     #2DD4BF;
  --color-purple:         #7C3AED;
  --color-purple-light:   #A78BFA;
  --color-red:            #E11D48;
  --color-red-light:      #FB7185;
  --color-amber:          #D97706;
  --color-amber-light:    #FBBF24;

  /* ── Estados ── */
  --color-success:        #22C55E;
  --color-danger:         #EF4444;

  /* ── Niveles de madurez ── */
  --maturity-inicial:     #DC2626;
  --maturity-desarrollo:  #EA580C;
  --maturity-definido:    #D97706;
  --maturity-gestionado:  #0D9488;
  --maturity-optimizado:  #16A34A;

  /* ── Tipografía ── */
  --font-family:          'DM Sans', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:         10px;
  --font-size-sm:         11px;
  --font-size-base:       13px;
  --font-size-md:         14px;
  --font-size-lg:         16px;
  --font-size-xl:         18px;
  --font-size-2xl:        22px;
  --font-size-3xl:        28px;

  /* ── Espaciado ── */
  --spacing-xs:           4px;
  --spacing-sm:           6px;
  --spacing-md:           10px;
  --spacing-lg:           16px;
  --spacing-xl:           20px;
  --spacing-2xl:          24px;
  --spacing-3xl:          32px;

  /* ── Bordes ── */
  --radius-sm:            6px;
  --radius-md:            8px;
  --radius-lg:            10px;
  --radius-xl:            12px;
  --radius-2xl:           14px;
  --radius-3xl:           16px;
  --radius-full:          50%;

  /* ── Transiciones ── */
  --transition-fast:      0.15s ease;
  --transition-base:      0.2s ease;
  --transition-smooth:    0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:      0.8s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --max-width:            640px;
  --padding-page:         18px;
}