/**
 * STATORIS Design Tokens - CSS Custom Properties
 * Brand: STATORIS (Tecnológico / IA / Domótica / Automatización / Electricidad)
 */

:root {
  /* ==========================================================================
     COLOR SYSTEM - PALETA BASE
     ========================================================================== */
  /* Titanio (Gris Neutro Frío / Grafito) */
  --statoris-titanium-900: #0C0F12;
  --statoris-titanium-800: #161B22;
  --statoris-titanium-700: #212832;
  --statoris-titanium-600: #323B49;
  --statoris-titanium-500: #485366;
  --statoris-titanium-400: #6B7A90;
  --statoris-titanium-300: #94A3B8;
  --statoris-titanium-200: #CBD5E1;
  --statoris-titanium-100: #F1F5F9;
  --statoris-titanium-50:  #F8FAFC;

  /* Cobre Metálico / Bronce Eléctrico (Acento Primario) */
  --statoris-copper-900: #54260E;
  --statoris-copper-800: #7C3A14;
  --statoris-copper-700: #A04C1B;
  --statoris-copper-600: #C86226;
  --statoris-copper-500: #E07B38;
  --statoris-copper-400: #EFA267;
  --statoris-copper-300: #F7C39B;
  --statoris-copper-200: #FDE1CE;
  --statoris-copper-100: #FFF3EB;

  /* Cian Eléctrico / Neón IA (Acento Tecnológico) */
  --statoris-cyan-900: #06283D;
  --statoris-cyan-800: #0B4268;
  --statoris-cyan-700: #0A669F;
  --statoris-cyan-600: #0091DF;
  --statoris-cyan-500: #00B4D8;
  --statoris-cyan-400: #38BDF8;
  --statoris-cyan-300: #7DD3FC;
  --statoris-cyan-200: #BAE6FD;
  --statoris-cyan-100: #E0F2FE;

  /* Colores Semánticos */
  --statoris-success: #10B981;
  --statoris-warning: #F59E0B;
  --statoris-danger:  #EF4444;
  --statoris-info:    #0284C7;

  /* ==========================================================================
     TIPOGRAFÍA FLUIDA
     ========================================================================== */
  --statoris-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --statoris-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --statoris-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --statoris-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
  --statoris-text-sm: clamp(0.875rem, 0.825rem + 0.25vw, 0.9375rem);
  --statoris-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --statoris-text-lg: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
  --statoris-text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --statoris-text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
  --statoris-text-3xl: clamp(1.875rem, 1.65rem + 1.1vw, 2.25rem);
  --statoris-text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
  --statoris-text-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);
  --statoris-text-display: clamp(3.75rem, 3rem + 3.75vw, 5.5rem);

  /* ==========================================================================
     ESPACIADO Y RADIOS
     ========================================================================== */
  --statoris-space-1: 0.25rem;
  --statoris-space-2: 0.5rem;
  --statoris-space-3: 0.75rem;
  --statoris-space-4: 1rem;
  --statoris-space-6: 1.5rem;
  --statoris-space-8: 2rem;
  --statoris-space-12: 3rem;
  --statoris-space-16: 4rem;

  --statoris-radius-sm: 2px;
  --statoris-radius-md: 6px;
  --statoris-radius-lg: 10px;
  --statoris-radius-xl: 16px;
  --statoris-radius-full: 9999px;

  /* ==========================================================================
     TEMA POR DEFECTO: DARK INDUSTRIAL / HIGH-TECH
     ========================================================================== */
  --bg-app: var(--statoris-titanium-900);
  --bg-surface: var(--statoris-titanium-800);
  --bg-surface-elevated: var(--statoris-titanium-700);
  --bg-surface-hover: var(--statoris-titanium-600);

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-interactive: var(--statoris-copper-600);
  --border-focus: var(--statoris-cyan-500);

  --text-primary: #FFFFFF;
  --text-secondary: var(--statoris-titanium-300);
  --text-tertiary: var(--statoris-titanium-400);
  --text-accent: var(--statoris-copper-400);
  --text-cyan: var(--statoris-cyan-400);

  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.6);
  --shadow-glow-copper: 0 0 24px -2px rgba(200, 98, 38, 0.35);
  --shadow-glow-cyan: 0 0 24px -2px rgba(0, 180, 216, 0.35);
}

/* ==========================================================================
   TEMA CLARO (EDITORIAL / DOCUMENTACIÓN CORPORATIVA)
   ========================================================================== */
[data-theme="light"],
.theme-light {
  --bg-app: var(--statoris-titanium-50);
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: var(--statoris-titanium-100);
  --bg-surface-hover: #E2E8F0;

  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.16);
  --border-interactive: var(--statoris-copper-600);
  --border-focus: var(--statoris-cyan-600);

  --text-primary: var(--statoris-titanium-900);
  --text-secondary: var(--statoris-titanium-600);
  --text-tertiary: var(--statoris-titanium-500);
  --text-accent: var(--statoris-copper-700);
  --text-cyan: var(--statoris-cyan-700);

  --shadow-card: 0 4px 15px -2px rgba(0, 0, 0, 0.08);
  --shadow-glow-copper: 0 0 16px -2px rgba(200, 98, 38, 0.2);
  --shadow-glow-cyan: 0 0 16px -2px rgba(0, 180, 216, 0.2);
}