/* Design Tokens — sin estilos de negocio, solo variables base */
:root{
  /* Colores base */
  --color-primary: #ff512f;
  --color-primary-600: #e64a2a;
  --color-primary-700: #cc4225;
  --color-accent: #00c9ff;
  --color-bg: #0f0f12;
  --color-surface: #16161b;
  --color-elevated: #1e1e26;
  --color-text: #e7e7ea;
  --color-text-muted: #a5a5b1;
  --color-border: #2a2a34;
  --color-success: #23c552;
  --color-warning: #ffb020;
  --color-danger: #f43f5e;
  --color-info: #3b82f6;

  /* Tipografías */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;

  /* Tamaños de texto */
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Espaciado */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px;

  /* Radios y sombras */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
  --shadow-1: 0 2px 8px rgba(0,0,0,.15);
  --shadow-2: 0 8px 24px rgba(0,0,0,.25);
  --shadow-3: 0 14px 36px rgba(0,0,0,.35);

  /* Z-index */
  --z-nav: 1000; --z-modal: 1100; --z-toast: 1200;
}