/* =============================================================================
   LUMINOVA · CROMATIX — tokens.css
   Exportación 1:1 de las variables CSS que el sistema define HOY.
   Fuente: tokens/colors.css · typography.css · spacing.css · effects.css · fonts.css
   Nombres de variable EXACTOS, sin traducir ni normalizar.
   Valores exactos. Nada aquí es inventado: lo no definido está en sistema.md → "Vacíos".
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1 · COLOR
   Paleta cerrada: el manual no autoriza ningún color fuera de esta lista.
   -------------------------------------------------------------------------- */
:root {
  /* Corporativos (valores exactos del manual de marca) */
  --lc-blue:      #001ECD; /* Azul CROMATIX — contextos técnicos / especificador */
  --lc-purple:    #5B22C1; /* Púrpura CROMATIX — acento técnico secundario y hero */
  --lc-magenta:   #A029A4; /* Magenta CROMATIX — acento primario de UI del sistema */
  --lc-fucsia:    #B14D8B; /* Fucsia luminova — acento tienda y el punto · de firma */

  /* Neutrales del manual */
  --lc-black:     #000000; /* Negro puro: solo artes de marca, no es color de texto */
  --lc-grey:      #272527; /* Grey del manual */
  --lc-dark-grey: #202222; /* Dark Grey: color de texto por defecto y superficie inversa */
  --lc-white:     #FFFFFF; /* Blanco: fondo por defecto y logo sobre campo de color */

  /* Escala neutra (derivada, armonizada con #202222) */
  --lc-neutral-950: #171818; /* Fondo del footer y base de todas las sombras */
  --lc-neutral-900: #202222; /* Igual a --lc-dark-grey */
  --lc-neutral-800: #272527; /* Igual a --lc-grey */
  --lc-neutral-700: #3a393b; /* Neutro oscuro intermedio */
  --lc-neutral-600: #55575a; /* Texto secundario */
  --lc-neutral-500: #7b7d80; /* Texto atenuado / muted */
  --lc-neutral-400: #a3a5a8; /* Texto deshabilitado y logotipos de terceros en gris */
  --lc-neutral-300: #c9cacc; /* Bordes visibles sobre fondo claro */
  --lc-neutral-200: #e4e5e6; /* Divisores */
  --lc-neutral-100: #f1f1f2; /* Superficie 3 (wash de hover en neutros) */
  --lc-neutral-50:  #f8f8f9; /* Superficie 2 (fondo de bloque suave) */

  /* Tintes: solo wash de superficie o fondo de badge. Nunca texto ni borde. */
  --lc-magenta-tint: #f6eaf5; /* Wash magenta — bloques comerciales / Luminova */
  --lc-blue-tint:    #e9ebfb; /* Wash azul — bloques técnicos / Cromatix */
  --lc-fucsia-tint:  #f7edf3; /* Wash fucsia — badge de acento tienda */

  /* Superficies (alias semánticos, Luminova-first) */
  --color-bg:              var(--lc-white);     /* Fondo de página */
  --color-surface:         var(--lc-white);     /* Superficie de tarjeta y campo */
  --color-surface-2:       var(--lc-neutral-50);/* Superficie secundaria / bloque suave */
  --color-surface-3:       var(--lc-neutral-100);/* Wash de hover en controles neutros */
  --color-surface-inverse: var(--lc-dark-grey); /* Superficie oscura (hero, bandas, nav) */

  /* Texto */
  --color-text:           var(--lc-dark-grey);   /* Texto por defecto */
  --color-text-secondary: var(--lc-neutral-600); /* Texto de apoyo y párrafos secundarios */
  --color-text-muted:     var(--lc-neutral-500); /* Metadatos, captions, placeholders */
  --color-text-inverse:   var(--lc-white);       /* Texto sobre superficie oscura */
  --color-text-on-accent: var(--lc-white);       /* Texto sobre relleno de acento */

  /* Acento primario — Luminova se apoya en magenta / fucsia */
  --color-primary:        var(--lc-magenta); /* Acento primario de UI (CTA, foco, activo) */
  --color-primary-hover:  #8b2390;           /* Magenta oscurecido para hover */
  --color-primary-active: #741e78;           /* Magenta oscurecido para press */
  --color-accent:         var(--lc-fucsia);  /* Acento secundario de tienda */

  /* Acentos Cromatix / técnicos */
  --color-tech:   var(--lc-blue);   /* Acento de contexto técnico (ficha, fotometría, specs) */
  --color-tech-2: var(--lc-purple); /* Acento técnico secundario */

  /* Líneas y bordes */
  --color-border:        rgba(32, 34, 34, 0.14); /* Hairline por defecto (tarjeta, tabla) */
  --color-border-strong: rgba(32, 34, 34, 0.28); /* Borde de énfasis y de campo de formulario */
  --color-divider:       var(--lc-neutral-200);  /* Divisor de secciones y listas */

  /* Foco */
  --color-focus-ring: var(--lc-magenta); /* Color del anillo de foco */

  /* Luz emitida — solo ilustración, según manual */
  --lc-light-warm: #FFC63D; /* Ámbar ~2700K: representación de luz cálida */
  --lc-light-cool: #EAF2FF; /* Blanco frío: representación de luz fría */
}

/* -----------------------------------------------------------------------------
   2 · TIPOGRAFÍA
   Familia única de marca: Albert Sans (variable 100–900), self-hosted.
   -------------------------------------------------------------------------- */
:root {
  --font-sans:    "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* Familia de marca */
  --font-display: var(--font-sans); /* Alias de display: hoy es la misma familia (ver "Vacíos") */
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace; /* Solo código en la guía dev */

  /* Pesos (eje variable 100–900) */
  --fw-thin:       100; /* Titulares grandes de la tienda y cifras de cuenta */
  --fw-extralight: 200; /* Declarado; sin uso observado en el sistema */
  --fw-light:      300; /* Peso de cuerpo por defecto — es lo que da el aire premium */
  --fw-regular:    400; /* Subtítulos y H3 de contenido */
  --fw-medium:     500; /* Etiquetas de UI, nombres de producto, valores de tabla */
  --fw-semibold:   600; /* Botones, precios, encabezados de columna, ítems de nav */
  --fw-bold:       700; /* Excepcional: dato crítico o palabra única */

  /* Escala de tamaños (base 16px = 1rem) */
  --fs-3xs: 0.6875rem; /* 11px — legal, caption, badge, eyebrow mínimo */
  --fs-2xs: 0.75rem;   /* 12px — etiqueta UI, tagline, migas, metadatos */
  --fs-xs:  0.8125rem; /* 13px — etiqueta ancha y bloque de código */
  --fs-sm:  0.9375rem; /* 15px — cuerpo denso, botón md, campo de formulario */
  --fs-md:  1rem;      /* 16px — cuerpo base */
  --fs-lg:  1.1875rem; /* 19px — bajada, dato numérico técnico, H4 */
  --fs-xl:  1.5rem;    /* 24px — H3 */
  --fs-2xl: 2rem;      /* 32px — H2 de sección */
  --fs-3xl: 2.75rem;   /* 44px — H1 de página y precio grande */
  --fs-4xl: 3.75rem;   /* 60px — display / slogan */
  --fs-5xl: 5rem;      /* 80px — display máximo */

  /* Interlineado */
  --lh-tight:   1.05; /* Display y H1 */
  --lh-snug:    1.2;  /* H2, H3, etiquetas, nombres de producto */
  --lh-normal:  1.5;  /* Cuerpo por defecto */
  --lh-relaxed: 1.65; /* Párrafos largos y bajadas */

  /* Tracking */
  --ls-tight:  -0.02em; /* Display y titulares */
  --ls-normal:  0;      /* Cuerpo */
  --ls-wide:    0.08em; /* Etiqueta UI en mayúscula */
  --ls-wider:   0.18em; /* Tagline / eyebrow en mayúscula — firma de la marca */

  /* Roles semánticos de peso */
  --text-display-weight: var(--fw-light);    /* Display = 300 */
  --text-title-weight:   var(--fw-semibold); /* Título de componente = 600 */
  --text-body-weight:    var(--fw-light);    /* Cuerpo = 300 */
  --text-label-weight:   var(--fw-medium);   /* Etiqueta = 500 */
}

/* -----------------------------------------------------------------------------
   3 · ESPACIADO — grilla base 4px
   -------------------------------------------------------------------------- */
:root {
  --space-0:  0;         /* Sin espacio */
  --space-1:  0.25rem;   /* 4px  — gap mínimo entre icono y texto */
  --space-2:  0.5rem;    /* 8px  — gap interno de controles */
  --space-3:  0.75rem;   /* 12px — padding de celda y chips */
  --space-4:  1rem;      /* 16px — gap de grilla corta */
  --space-5:  1.5rem;    /* 24px — padding por defecto de tarjeta y gutter */
  --space-6:  2rem;      /* 32px — separación entre bloques */
  --space-7:  3rem;      /* 48px — gutter grande y separación de columnas */
  --space-8:  4rem;      /* 64px — separación de secciones */
  --space-9:  6rem;      /* 96px — padding vertical de sección */
  --space-10: 8rem;      /* 128px — separación máxima */
}

/* -----------------------------------------------------------------------------
   4 · RADIOS
   -------------------------------------------------------------------------- */
:root {
  --radius-none:   0;     /* Sin redondeo */
  --radius-sm:     4px;   /* Ítems de lista, swatches, checkbox */
  --radius-md:     8px;   /* Botón sm/md, campo de formulario, icono contenedor */
  --radius-lg:     14px;  /* Radio por defecto de TARJETA y botón lg */
  --radius-xl:     22px;  /* Bloques grandes (newsletter, asesoría) */
  --radius-pill:   999px; /* Cápsula: badge, chip, buscador, botón circular */
  --radius-circle: 50%;   /* Avatares, puntos de estado, pasos numerados */
}

/* Bordes (compuestos, dependen de los tokens de color) */
:root {
  --border-thin:   1px solid var(--color-border);          /* Hairline por defecto */
  --border-strong: 1.5px solid var(--color-border-strong); /* Énfasis y campos */
}

/* -----------------------------------------------------------------------------
   5 · SOMBRAS — frías y suaves, base rgba(23,24,24,…)
   -------------------------------------------------------------------------- */
:root {
  --shadow-xs: 0 1px 2px rgba(23, 24, 24, 0.06); /* Elevación mínima (icono, píldora) */
  --shadow-sm: 0 1px 3px rgba(23, 24, 24, 0.08), 0 1px 2px rgba(23, 24, 24, 0.04); /* Tarjeta en reposo */
  --shadow-md: 0 4px 12px rgba(23, 24, 24, 0.08), 0 2px 4px rgba(23, 24, 24, 0.04); /* Tarjeta en hover */
  --shadow-lg: 0 12px 32px rgba(23, 24, 24, 0.12), 0 4px 8px rgba(23, 24, 24, 0.05); /* Mega menú, popover */
  --shadow-xl: 0 24px 60px rgba(23, 24, 24, 0.16); /* Drawer y diálogo */
  --shadow-glow-magenta: 0 8px 32px rgba(160, 41, 164, 0.28); /* Glow: solo momento "encendido" de hero */
  --shadow-glow-blue:    0 8px 32px rgba(0, 30, 205, 0.24);   /* Glow técnico: solo hero técnico */
  --focus-ring: 0 0 0 3px rgba(160, 41, 164, 0.35); /* Anillo de foco de 3px, magenta — no se elimina */
}

/* -----------------------------------------------------------------------------
   6 · MOVIMIENTO — silencioso, sin bounce ni overshoot
   -------------------------------------------------------------------------- */
:root {
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* Curva por defecto de estados */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);     /* Entradas y transformaciones */
  --dur-fast:      120ms; /* Hover, press, foco */
  --dur-base:      200ms; /* Tarjetas, tabs, mega menú, paneles */
  --dur-slow:      360ms; /* Transiciones de bloque grande */
}

/* -----------------------------------------------------------------------------
   7 · LAYOUT
   -------------------------------------------------------------------------- */
:root {
  --container-sm: 640px;        /* Documento / columna de lectura */
  --container-md: 960px;        /* Contenido medio */
  --container-lg: 1200px;       /* Contenedor por defecto de página */
  --container-xl: 1400px;       /* Contenedor ancho */
  --gutter:    var(--space-5);  /* 24px — gutter por defecto */
  --gutter-lg: var(--space-7);  /* 48px — gutter amplio */
}

/* NOTA — no existen tokens para: puntos de quiebre, alturas de header,
   z-index, anchos de borde, ni tamaños tipográficos móviles.
   En la maqueta de la tienda están escritos literales en el CSS
   (breakpoints 1280 / 1080 / 900 / 680 / 400 px; contenedor .wrap 1360px;
   header 112 → 96 → auto px; z-index 20/60/120/130/200).
   No se declaran aquí como variables porque el sistema no los define así.
   Ver sistema.md → "Vacíos". */