/* ==========================================================================
   OnlyCell — Sistema de diseño
   variables.css · v1 · Lovely LAB

   Carga ANTES de styles.css y de admin.css:
     <link rel="stylesheet" href="../assets/css/variables.css">
     <link rel="stylesheet" href="../assets/css/styles.css">

   El <html> arranca en oscuro:  <html lang="es" data-theme="dark">
   Los bloques invertidos lo declaran:  <section class="tradein" data-theme="light">
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. COLOR — tema oscuro (por defecto)
   -------------------------------------------------------------------------- */

:root,
[data-theme="dark"] {

  /* Superficies — profundidad por escalones, nunca saltear uno */
  --surface-000: #09090b;   /* hero, footer, fondo de overlay */
  --surface-100: #0e0e11;   /* página y sección. No es #000: la pizca de azul
                               evita que los titanios tomen tinte verdoso */
  --surface-200: #161619;   /* card, panel, KPI: todo objeto tocable */
  --surface-300: #1e1e23;   /* ese objeto cuando lo estás tocando */

  /* Líneas */
  --line-100: #26262b;      /* hairline decorativa */
  --line-200: #35353d;      /* contorno de contenedor */
  --line-300: #60606b;      /* CONTROLES. 3:1 contra el fondo. No bajar de acá
                               en nada que reciba foco */

  /* Tintas */
  --ink-000: #f8f9fa;       /* títulos, precios, valores de KPI */
  --ink-100: #e6e6ea;       /* CUERPO DE TEXTO. Todo párrafo va acá, no en ink-000 */
  --ink-200: #9b9ba6;       /* secundario: bajadas, labels */
  --ink-300: #7e7e8a;       /* terciario: disclaimers, notas. Mínimo 12px */

  /* Acción — se invierte con el tema. Un solo par para todos los botones */
  --action-surface: #f8f9fa;
  --action-ink:     #0e0e11;
  --action-hover:   #ffffff;   /* único lugar del sistema con valor puro */

  --focus-ring: #f8f9fa;

  /* Señales — cada una significa una sola cosa */
  --pos:  #45d39b;   /* margen positivo, stock, "abierto ahora" */
  --neg:  #ff5f63;   /* pérdida por garantía, error de validación */
  --warn: #ffb13f;   /* aviso que no es error */

  --wsp:     #25d366;   /* SOLO: FAB, botón del header, cierre de canje */
  --wsp-ink: #06180d;

  /* Velos */
  --overlay: #09090bd9;
  --glow:    #ffffff14;

  /* Sombras — sobre negro la elevación la dan surface-200 y line-200.
     Estos tres son el único uso legítimo */
  --shadow-card:  0 1px 2px  #00000066;
  --shadow-pop:   0 8px 24px #00000080;
  --shadow-modal: 0 24px 64px #000000b3;
}


/* --------------------------------------------------------------------------
   2. COLOR — tema invertido
   El cotizador y las cards en promo. Mismo marcado, mismos tokens.
   -------------------------------------------------------------------------- */

[data-theme="light"] {
  --surface-000: #ffffff;
  --surface-100: #f8f9fa;   /* blanco tiza, no blanco puro */
  --surface-200: #ffffff;
  --surface-300: #eff0f2;

  --line-100: #e6e7ea;
  --line-200: #cfd0d6;
  --line-300: #8e8e99;

  --ink-000: #111111;       /* negro profundo, no #000 */
  --ink-100: #222222;
  --ink-200: #55555f;
  --ink-300: #6e6e79;

  --action-surface: #111111;
  --action-ink:     #f8f9fa;
  --action-hover:   #000000;

  --focus-ring: #111111;

  --pos:  #0e7a52;
  --neg:  #c42a2e;
  --warn: #8a5a00;

  --wsp:     #0b7a3a;
  --wsp-ink: #ffffff;

  --overlay: #09090bd9;
  --glow:    #11111110;

  --shadow-card:  0 1px 2px  #1111110f;
  --shadow-pop:   0 8px 24px #11111114;
  --shadow-modal: 0 24px 64px #1111111f;
}


/* --------------------------------------------------------------------------
   3. TIPOGRAFÍA
   Las tres familias ya están cargadas en el <head> de index.html
   -------------------------------------------------------------------------- */

:root {
  --font-display: "Space Grotesk", "SF Pro Display", system-ui, sans-serif;
  --font-sans:    "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}


/* --------------------------------------------------------------------------
   4. ESPACIADO — base 4
   Si un valor no está en esta escala, está mal medido
   -------------------------------------------------------------------------- */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* la unidad más usada: padding de card y de campo */
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;   /* aire entre secciones, mobile */
  --space-9: 112px;  /* aire entre secciones, desktop */
}


/* --------------------------------------------------------------------------
   5. RADIOS
   Controles casi rectos, contenedores redondeados
   -------------------------------------------------------------------------- */

:root {
  --radius-xs:   3px;    /* chip, tag, badge */
  --radius-sm:   5px;    /* BOTONES e INPUTS */
  --radius-md:  10px;    /* card de producto, KPI */
  --radius-lg:  16px;    /* panel del cotizador, modal */
  --radius-xl:  24px;    /* bloque de sección con fondo propio */
  --radius-full: 999px;  /* FAB, avatar, thumb del slider */
}


/* --------------------------------------------------------------------------
   6. MOVIMIENTO
   Una sola curva. El momento en que aparece una segunda, el sitio se siente
   hecho por dos personas distintas
   -------------------------------------------------------------------------- */

:root {
  --ease: cubic-bezier(.25, 1, .5, 1);
  --dur-fast:  150ms;   /* tap en mobile, chip, foco */
  --dur-base:  300ms;   /* hover, modal, despliegue */
  --dur-slow:  600ms;   /* revelado al scrollear */
}