/* ===========================================================================
   ARLUMA · Design tokens
   Fuente única de verdad del sistema visual. Cambiar un color acá lo cambia
   en todo el sitio. No escribas colores literales fuera de este archivo.
   ---------------------------------------------------------------------------
   PALETA: negro y rojo, con el rojo al frente.
   Es la paleta del local. Sobre negro, un rojo saturado se lee como luz —que
   es lo que Arluma vende— y no como alarma, siempre que el resto de la
   interfaz se mantenga en grises neutros. Por eso las superficies son negros
   sin tinte: cualquier matiz de color ahí ensucia el rojo.

   Los tokens se llaman `--brand`, no `--rojo`: si mañana la marca cambia de
   color, el nombre sigue siendo correcto y no hay que renombrar 60 usos.
   =========================================================================== */

:root {
  /* La paleta de Arluma es negra y roja por decisión de la tienda: el sitio
     es oscuro siempre, no sigue el tema del sistema. Declararlo hace que el
     navegador pinte en oscuro lo que no controlamos con CSS —los menús
     desplegables, la barra de desplazamiento y la barra superior del
     teléfono—, en vez de dejarlos blancos sobre el fondo negro. */
  color-scheme: dark;

  /* --- Bases: negros neutros, de más oscuro a más claro ------------------- */
  --ink-900: #08080a;   /* fondo de página */
  --ink-850: #0d0d10;
  --ink-800: rgba(20, 20, 24, .74); /* cristal sobre imágenes */
  --ink-750: #141417;   /* superficie de tarjetas */
  --ink-700: #1b1b1f;   /* superficie elevada */
  --ink-600: #23232a;   /* inputs, chips */
  --ink-500: #32323a;   /* bordes fuertes */

  /* --- Marca --------------------------------------------------------------
     Los canales sueltos (--brand-rgb) permiten escribir transparencias sin
     repetir el color: rgba(var(--brand-rgb), .35). Es lo que hace que cambiar
     de rojo a cualquier otro color sea una sola línea. */
  --brand:        #d91f35;
  --brand-rgb:    217, 31, 53;
  --brand-soft:   #ff4256;   /* hover y textos sobre negro */
  --brand-bright: #ff6b7b;
  --brand-deep:   #8e1220;   /* sombras y degradados */

  /* --- Texto -------------------------------------------------------------- */
  --text:          #f6f6f7;
  --text-muted:    #a3a3ac;
  --text-dim:      #6c6c77;
  --text-on-brand: #ffffff;  /* blanco sobre el rojo: 4.8:1, cumple AA */

  /* --- Semánticos ---------------------------------------------------------
     El rojo es el color de marca, así que los errores NO pueden distinguirse
     sólo por ser rojos: van en un rojo más claro y SIEMPRE acompañados de
     texto o de un icono que diga qué pasó. */
  --ok:     #34d399;
  --warn:   #f5a524;
  --danger: #ff7a88;
  --info:   #60a5fa;

  /* --- Líneas y superficies ----------------------------------------------- */
  --line:        rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --glass:       rgba(13, 13, 16, 0.78);

  /* --- Gradientes de marca ------------------------------------------------ */
  --grad-glow:   radial-gradient(circle at 50% 0%, rgba(var(--brand-rgb), .30), transparent 62%);
  --grad-aurora: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 55%, var(--brand-soft) 100%);
  --grad-line:   linear-gradient(90deg, transparent, var(--line-strong), transparent);

  /* --- Sombras y resplandores --------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .7);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .85);
  --glow-brand: 0 0 0 1px rgba(var(--brand-rgb), .45), 0 8px 32px -8px rgba(var(--brand-rgb), .55);

  /* --- Tipografía ---------------------------------------------------------- */
  --font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  clamp(2.25rem, 5vw, 3.5rem);
  --fs-hero: clamp(2.75rem, 7vw, 4.75rem);

  /* --- Ritmo espacial (escala de 4px) -------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  /* --- Radios -------------------------------------------------------------- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

  /* --- Layout -------------------------------------------------------------- */
  --container: 1240px;
  --container-narrow: 820px;
  --header-h: 72px;

  /* --- Movimiento ----------------------------------------------------------- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 140ms var(--ease);
  --t-med:  260ms var(--ease);
  --t-slow: 480ms var(--ease);

  /* --- Capas ---------------------------------------------------------------- */
  --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300;
  --z-chat: 400; --z-modal: 500; --z-toast: 600;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; }
}