/*
 * ============================================================
 * LUMTUX 2.0 — DESIGN TOKENS (Light Edition)
 * Archivo: css/tokens.css
 * Rediseño: fondo blanco, naranja quemado, grises limpios.
 * ============================================================
 */

:root {

  /* ----------------------------------------------------------
   * PALETA — Blanco + Naranja quemado + Grises
   * ---------------------------------------------------------- */

  /* Fondos */
  --color-bg-base:       #FFFFFF;          /* Blanco puro — fondo principal */
  --color-bg-subtle:     #F7F7F5;          /* Gris muy claro — secciones alternas */
  --color-bg-surface:    #FFFFFF;          /* Superficie de cards */
  --color-bg-dark:       #1A1A1A;          /* Fondo oscuro — hero strip, footer */
  --color-bg-dark-soft:  #242424;          /* Superficies sobre fondo oscuro */

  /* Bordes */
  --color-border:        #E5E5E3;          /* Borde neutro claro */
  --color-border-strong: #D0CFCC;          /* Borde más visible */
  --color-border-accent: rgba(185,82,35,0.35); /* Borde naranja sutil */

  /* Texto */
  --color-text-primary:  #111111;          /* Casi negro — titulares */
  --color-text-secondary:#555550;          /* Gris medio — cuerpo */
  --color-text-muted:    #999992;          /* Gris claro — metadata */
  --color-text-on-dark:  #F5F4F0;          /* Texto sobre fondos oscuros */
  --color-text-on-dark-2:#A8A8A0;          /* Secundario sobre oscuro */
  --color-text-inverse:  #FFFFFF;          /* Blanco — sobre botón naranja */

  /* Naranja quemado — acento principal */
  --color-accent:        #B95223;          /* Naranja quemado Lumtux */
  --color-accent-hover:  #A04420;          /* Más oscuro para hover */
  --color-accent-light:  #C96333;          /* Más claro para variaciones */
  --color-accent-bg:     rgba(185,82,35,0.07); /* Fondo tintado muy sutil */
  --color-accent-bg-md:  rgba(185,82,35,0.12); /* Fondo tintado medio */

  /* Grises */
  --color-gray-50:  #F7F7F5;
  --color-gray-100: #EFEEEB;
  --color-gray-200: #E5E5E3;
  --color-gray-300: #D0CFCC;
  --color-gray-400: #AEADA8;
  --color-gray-500: #888880;
  --color-gray-600: #555550;
  --color-gray-700: #3A3A36;
  --color-gray-800: #242420;
  --color-gray-900: #111111;

  /* Colores por categoría (más sobrios sobre fondo blanco) */
  --cat-agile:    #B95223;  /* naranja quemado */
  --cat-agile-bg: rgba(185,82,35,0.08);
  --cat-ai:       #6750A4;  /* violeta */
  --cat-ai-bg:    rgba(103,80,164,0.08);
  --cat-iso:      #1A7A5E;  /* verde oscuro */
  --cat-iso-bg:   rgba(26,122,94,0.08);
  --cat-cyber:    #C0392B;  /* rojo */
  --cat-cyber-bg: rgba(192,57,43,0.08);
  --cat-lean:     #B7860B;  /* ocre */
  --cat-lean-bg:  rgba(183,134,11,0.08);
  --cat-business: #1E6FA3;  /* azul */
  --cat-business-bg:rgba(30,111,163,0.08);
  --cat-it:       #2E7D6B;  /* verde azulado */
  --cat-it-bg:    rgba(46,125,107,0.08);
  --cat-project:  #8C4A8C;  /* púrpura */
  --cat-project-bg:rgba(140,74,140,0.08);

  /* ----------------------------------------------------------
   * TIPOGRAFÍA
   * Display: Syne (geométrica, distintiva)
   * Body: Inter (legible, profesional)
   * Mono: JetBrains Mono (códigos, datos)
   * ---------------------------------------------------------- */

  --font-display: 'Syne', 'Helvetica Neue', sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Escala tipográfica */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* Pesos */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   800;

  /* Interlineado */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.65;

  /* ----------------------------------------------------------
   * ESPACIADO (base 4px)
   * ---------------------------------------------------------- */

  --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;
  --space-32: 8rem;

  /* ----------------------------------------------------------
   * RADIOS
   * ---------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
   * SOMBRAS
   * ---------------------------------------------------------- */

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 1px 4px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.12);
  --shadow-accent: 0 4px 20px rgba(185,82,35,0.25);

  /* ----------------------------------------------------------
   * TRANSICIONES
   * ---------------------------------------------------------- */

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ----------------------------------------------------------
   * LAYOUT
   * ---------------------------------------------------------- */

  --max-width: 1200px;
  --nav-height: 68px;
}