/**
 * Paleta Alestra Móvil (Figma). Usar variables en componentes propios del host.
 * No depende de Tailwind: funciona con Propshaft/Sprockets puro.
 */
:root {
  /* Brand — Figma Alestra Móvil */
  --alestra-azul-visionario: #10069f;
  --alestra-violeta-movilidad: #ac4fc6;
  --alestra-violeta-movilidad-hover: #9a3db3;
  --alestra-celeste-digital: #00b8ff;
  --alestra-celeste-digital-hover: #0099d6;
  --alestra-gris-raton: #9ea8b1;
  --alestra-darker-light-blue: #ebf0f8;
  --alestra-light-grey: #e7e7f0;
  --alestra-stroke: #ebebf2;
  --alestra-grey: #535359;

  /* Alias legacy → brand (apps/host que ya usan estos nombres) */
  --alestra-blue-950: var(--alestra-azul-visionario);
  --alestra-indigo-50: #eef2ff;
  --alestra-indigo-100: #e0e7ff;
  --alestra-indigo-500: #6366f1;
  --alestra-indigo-600: #4f46e5;
  --alestra-indigo-700: #4338ca;
  --alestra-indigo-900: #312e81;

  --alestra-purple-600: #9333ea;
  --alestra-purple-700: #7e22ce;
  --alestra-magenta-500: var(--alestra-violeta-movilidad);
  --alestra-magenta-600: var(--alestra-violeta-movilidad-hover);

  --alestra-cyan-500: #33c6ff;
  --alestra-cyan-600: var(--alestra-celeste-digital);
  --alestra-cyan-700: var(--alestra-celeste-digital-hover);

  /* Neutros */
  --alestra-gray-50: #f9fafb;
  --alestra-gray-100: #f3f4f6;
  --alestra-gray-200: var(--alestra-light-grey);
  --alestra-gray-300: #d1d5db;
  --alestra-gray-500: #6b7280;
  --alestra-gray-600: var(--alestra-grey);
  --alestra-gray-700: #374151;
  --alestra-gray-900: #000000;
  --alestra-blue-gray-50: var(--alestra-darker-light-blue);

  /* Semánticos */
  --alestra-success-bg: #e4faf1;
  --alestra-success-border: #a7e6c8;
  --alestra-success-text: #315b51;

  --alestra-warning-bg: #fffbeb;
  --alestra-warning-border: #fcd34d;
  --alestra-warning-text: #92400e;

  --alestra-error-bg: #ffe0e0;
  --alestra-error-border: #fecaca;
  --alestra-error-text: #8b1a1a;

  /* Tokens semánticos de aplicación */
  --alestra-color-primary: var(--alestra-violeta-movilidad);
  --alestra-color-primary-hover: var(--alestra-violeta-movilidad-hover);
  --alestra-color-accent: var(--alestra-celeste-digital);
  --alestra-color-accent-hover: var(--alestra-celeste-digital-hover);
  --alestra-color-danger-action: #8b1a1a;
  --alestra-color-heading: var(--alestra-azul-visionario);
  --alestra-color-body-bg: #ffffff;
  --alestra-color-text: #000000;
  --alestra-color-muted: var(--alestra-grey);
  --alestra-color-surface: #ffffff;
  --alestra-color-surface-muted: #f7f8fc;
  --alestra-color-filter-bg: #f5f4ff;
  --alestra-color-border: var(--alestra-stroke);
  --alestra-color-input-border: var(--alestra-gris-raton);
  --alestra-color-overlay: rgb(17 24 39 / 0.56);
  --alestra-color-nav-active-bg: var(--alestra-celeste-digital);
  --alestra-color-nav-active-text: #ffffff;
  --alestra-color-footer-bg: var(--alestra-azul-visionario);
  --alestra-color-focus-ring: rgb(172 79 198 / 0.35);

  --alestra-font-family: "Work Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --alestra-radius-sm: 0.25rem;
  --alestra-radius-md: 0.375rem;
  --alestra-radius-input: 0.25rem;
  --alestra-radius-lg: 0.75rem;
  --alestra-radius-xl: 0.75rem;
  --alestra-radius-2xl: 1.25rem;
  --alestra-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --alestra-shadow-md: 0 4px 4px rgb(0 0 0 / 0.25);
  --alestra-sidebar-width: 382px;
  --alestra-content-max-width: 956px;
}

body.alestra-layout-body {
  margin: 0;
  min-height: 100vh;
  background: var(--alestra-color-body-bg);
  color: var(--alestra-color-text);
  font-family: var(--alestra-font-family);
  line-height: 1.5;
}