/* TEMPO design tokens — generado desde tokens.json (no editar a mano). */
:root {

  /* Primarios */
  --brand-black: #0B0B0D; /* Negro Profundo */
  --brand-white: #FFFFFF; /* Blanco */
  --brand-orange: #FF551E; /* Naranja Tempo */
  --brand-blue: #2563EB; /* Azul Energía */

  /* Secundarios */
  --gray-dark: #1A1A1F; /* Gris Oscuro */
  --gray-medium: #2A2A31; /* Gris Medio */
  --gray-light: #F1F2F4; /* Gris Claro */
  --orange-light: #FFF0EB; /* Naranja Claro */
  --blue-light: #E7EDFF; /* Azul Claro */

  /* Escala de grises */
  --gray-950: #0B0B0D; /* Gris 950 */
  --gray-900: #1A1A1F; /* Gris 900 */
  --gray-800: #2A2A31; /* Gris 800 */
  --gray-700: #4A4A52; /* Gris 700 */
  --gray-600: #6B6B73; /* Gris 600 */
  --gray-500: #9B9BA3; /* Gris 500 */
  --gray-400: #B9B9C0; /* Gris 400 */
  --gray-300: #D7D7DD; /* Gris 300 */
  --gray-100: #F1F2F4; /* Gris 100 */
  --gray-0: #FFFFFF; /* Gris 0 */

  /* Tintes Naranja */
  --orange-100: #FF551E; /* Naranja 100 % */
  --orange-80: #FF774B; /* Naranja 80 % */
  --orange-60: #FF9978; /* Naranja 60 % */
  --orange-40: #FFBBA5; /* Naranja 40 % */
  --orange-20: #FFDDD2; /* Naranja 20 % */
  --orange-10: #FFEEE8; /* Naranja 10 % */
  --orange-5: #FFF6F4; /* Naranja 5 % */

  /* Tintes Azul */
  --blue-100: #2563EB; /* Azul 100 % */
  --blue-80: #5182EF; /* Azul 80 % */
  --blue-60: #7CA1F3; /* Azul 60 % */
  --blue-40: #A8C1F7; /* Azul 40 % */
  --blue-20: #D3E0FB; /* Azul 20 % */
  --blue-10: #E9EFFD; /* Azul 10 % */
  --blue-5: #F4F7FE; /* Azul 5 % */

  /* Semánticos de interfaz */
  --success: #16A34A; /* Éxito */
  --warning: #F59E0B; /* Advertencia */
  --error: #DC2626; /* Error */
  --info: #2563EB; /* Información */

  /* Interfaz */
  --ui-inkSoft: #4A4A52; /* Texto secundario (claro) */
  --ui-inkMutedDark: #9B9BA3; /* Texto secundario (oscuro) */
  --ui-lineLight: #E3E4E8; /* Línea sobre claro */
  --ui-lineDark: #24242B; /* Línea sobre oscuro */
  --ui-surfaceDark: #141417; /* Superficie oscura */

  /* Gradientes */
  --gradient-orange: linear-gradient(90deg, #FF551E, #FF7747);
  --gradient-orange-from: #FF551E;
  --gradient-orange-to: #FF7747;
  --gradient-blue: linear-gradient(90deg, #2563EB, #4F7CFF);
  --gradient-blue-from: #2563EB;
  --gradient-blue-to: #4F7CFF;

  /* Tipografía */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --type-display: 700 48px/56px var(--font-primary);
  --type-display-size: 48px;
  --type-h2: 600 32px/40px var(--font-primary);
  --type-h2-size: 32px;
  --type-h3: 500 24px/32px var(--font-primary);
  --type-h3-size: 24px;
  --type-body: 400 16px/24px var(--font-primary);
  --type-body-size: 16px;
  --type-caption: 400 12px/16px var(--font-primary);
  --type-caption-size: 12px;
  --tracking-eyebrow: 0.14em;
  --tracking-tight: -0.02em;

  /* Espaciado (escala de 4 px) */
  --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;
  --space-24: 96px;

  /* Radios */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-appIconPct: 22.37%;

  /* Íconos */
  --icon-stroke: 2px;
  --icon-grid: 24px;
}