/* ============================================================
   variables.css — Tech·ES
   Design tokens: colores, tipografía, espaciado, sombras
   ============================================================ */

:root {
  /* ── PALETA LIGHT (por defecto) ── */
  --color-bg:           #FAFAF8;      /* Blanco roto cálido, no fatiga ocular */
  --color-bg-alt:       #F2F1EE;      /* Fondo alterno secciones */
  --color-surface:      #FFFFFF;      /* Cards, modales */
  --color-surface-2:    #EDECE9;      /* Hover sutiles */
  --color-border:       #E0DED9;      /* Bordes sutiles */
  --color-border-strong:#C8C5BF;      /* Separadores visibles */

  --color-text:         #1A1917;      /* Negro suave — sin duro #000 */
  --color-text-2:       #4A4845;      /* Texto secundario */
  --color-text-3:       #7A7773;      /* Metadatos, captions */
  --color-text-inv:     #FAFAF8;      /* Texto sobre fondos oscuros */

  --color-accent:       #2563EB;      /* Azul editorial — links, CTAs */
  --color-accent-hover: #1D4ED8;
  --color-accent-soft:  #EFF6FF;

  --color-success:      #16A34A;
  --color-warning:      #D97706;
  --color-error:        #DC2626;

  /* ── CATEGORÍAS ── */
  --cat-ia:             #7C3AED;
  --cat-ia-bg:          #F5F3FF;
  --cat-tech:           #0891B2;
  --cat-tech-bg:        #ECFEFF;
  --cat-prod:           #059669;
  --cat-prod-bg:        #ECFDF5;
  --cat-fin:            #D97706;
  --cat-fin-bg:         #FFFBEB;
  --cat-life:           #DB2777;
  --cat-life-bg:        #FDF2F8;

  /* ── TIPOGRAFÍA ── */
  --font-display:       'Playfair Display', Georgia, serif;
  --font-body:          'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:          'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   1.875rem;   /* 30px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   3rem;       /* 48px */
  --text-5xl:   3.75rem;    /* 60px */

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;

  /* ── ESPACIADO ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── LAYOUT ── */
  --container-max:  1200px;
  --container-wide: 1400px;
  --container-prose: 720px;
  --container-padding: clamp(1rem, 4vw, 2rem);

  /* ── BORDES Y RADIOS ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── SOMBRAS ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 10px 30px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl:   0 20px 50px rgba(0,0,0,0.12);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.10);

  /* ── TRANSICIONES ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;
  --transition-spring: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-INDEX ── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── GRADIENTES PARA IMÁGENES PLACEHOLDER ── */
  --grad-1: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #7c3aed 100%);
  --grad-2: linear-gradient(135deg, #065f46 0%, #059669 60%, #34d399 100%);
  --grad-3: linear-gradient(135deg, #78350f 0%, #d97706 60%, #fbbf24 100%);
  --grad-4: linear-gradient(135deg, #4c1d95 0%, #7c3aed 60%, #a78bfa 100%);
  --grad-5: linear-gradient(135deg, #0c4a6e 0%, #0891b2 60%, #22d3ee 100%);
  --grad-6: linear-gradient(135deg, #831843 0%, #db2777 60%, #f472b6 100%);
  --grad-7: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 50%, #06b6d4 100%);
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --color-bg:           #0F0F0E;
  --color-bg-alt:       #161615;
  --color-surface:      #1C1C1A;
  --color-surface-2:    #252523;
  --color-border:       #2E2D2B;
  --color-border-strong:#3D3C39;

  --color-text:         #F2F1EE;
  --color-text-2:       #A8A5A0;
  --color-text-3:       #6B6865;
  --color-text-inv:     #0F0F0E;

  --color-accent:       #60A5FA;
  --color-accent-hover: #93C5FD;
  --color-accent-soft:  #1E3A5F;

  --cat-ia-bg:   #2D1B69;
  --cat-tech-bg: #0C3344;
  --cat-prod-bg: #064E3B;
  --cat-fin-bg:  #451A03;
  --cat-life-bg: #500724;

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:   0 10px 30px rgba(0,0,0,0.5);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.5);
}