/*
  variables.css — Custom properties del sistema de diseno de "RutaVibe".
  Traducido 1:1 desde sistema-diseno.md. NO agregar valores "a ojo" aca:
  cualquier token nuevo debe agregarse primero al documento de diseno.
  Modo oscuro unico (sin toggle claro/oscuro), ver sistema-diseno.md seccion 0.5.
*/

:root {
  /* 1.1 Fondos */
  --bg-void: #05070d;
  --bg-base: #0b0e17;
  --bg-surface: #131728;
  --bg-surface-2: #1a1f36;
  --bg-surface-hover: #1f2540;

  /* 1.2 Bordes */
  --border-subtle: #232948;
  --border-default: #333a5c;
  --border-strong: #454d78;

  /* 1.3 Texto */
  --text-primary: #f4f5f9;
  --text-secondary: #a8adc7;
  --text-tertiary: #7a7fab;
  --text-disabled: #565c82;
  --text-on-gold: #1a1206;
  --text-on-chip: #170f05;

  /* 1.4 Dorado (marca / acento unico) */
  --gold-300: #e8c766;
  --gold-500: #d4af37;
  --gold-600: #b8912a;
  --gold-700: #8f701f;
  --gold-glow-15: rgba(212, 175, 55, 0.15);
  --gold-glow-35: rgba(212, 175, 55, 0.35);

  /* 1.5 Semaforo de seguridad/salud */
  --safety-green: #4ade80;
  --safety-amber: #f59e0b;
  --safety-red: #f87171;

  /* 1.6 Estados semanticos generales */
  --color-success: var(--safety-green);
  --color-warning: var(--safety-amber);
  --color-danger: var(--safety-red);

  /* 1.7 Foco (accesibilidad de teclado) */
  --focus-ring-color: #e8c766;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* 2.2 Tipografia — escala de tamanos (base 16px, escala ~1.25) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: clamp(2.5rem, 5vw, 4rem);

  /* 2.1 Familias tipograficas (auto-alojadas en /assets/fonts/, ver sistema-diseno.md 0.4) */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* 2.3 Line-height y letter-spacing */
  --lh-content: 1.6;
  --lh-heading: 1.3;
  --lh-ui: 1.4;
  --ls-heading-lg: -0.01em;
  --ls-uppercase-sm: 0.03em;

  /* 3.1 Espaciado (grid base de 8px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* 3.2 Radios */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* 3.3 Sombras */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-gold-glow: 0 4px 20px rgba(212, 175, 55, 0.35);

  /* 3.4 Transiciones */
  --transition-fast: 120ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 350ms ease-in-out;
  --transition-globe-zoom: 1300ms cubic-bezier(0.65, 0, 0.35, 1);

  /* 3.5 Capas (z-index) */
  --z-starfield: 0;
  --z-globe: 1;
  --z-overlay-ui: 10;
  --z-header: 20;
  --z-drawer-scrim: 40;
  --z-drawer: 50;
  --z-dropdown: 60;
  --z-toast: 70;
  --z-modal: 80;
  --z-loading-screen: 100;

  /* 4. Breakpoints — se documentan como referencia (usar en media queries, no como var CSS) */
  /* movil: 0-639px | tablet: 640-1023px | escritorio: 1024-1439px | escritorio grande: >=1440px */
  --container-padding-mobile: 16px;
  --container-padding-tablet: 24px;
  --container-padding-desktop: 40px;
  --container-max-width: 1280px;
}