/* ============================================================
   AF TECNOCENTER — SISTEMA DE DISEÑO
   Un solo lugar para color, tipografía, espacio, radios,
   sombras y movimiento. Nada de valores sueltos en los
   componentes: si un número se repite, vive acá.
   ============================================================ */

:root {
  /* ── Color · superficies ─────────────────────────────────
     Una sola familia oscura, con elevación por pasos.
     La "stage" clara es donde vive la foto del producto:
     los módulos son piezas pequeñas y brillantes, sobre
     blanco se leen infinitamente mejor.                  */
  --c-bg:            #0A0B0A;
  --c-surface-1:     #121412;
  --c-surface-2:     #191C19;
  --c-surface-3:     #212521;
  --c-surface-hover: #262B26;

  --c-stage:         #FFFFFF;
  --c-stage-2:       #F4F6F2;
  --c-stage-3:       #E8EBE5;

  /* ── Color · texto ─────────────────────────────────────── */
  --c-text:          #F2F5F0;
  --c-text-2:        rgba(242, 245, 240, 0.66);
  --c-text-3:        rgba(242, 245, 240, 0.40);

  --c-ink:           #0C0E0C;   /* texto sobre superficie clara */
  --c-ink-2:         #5A615A;
  --c-ink-3:         #6E756E;   /* 4.6:1 sobre blanco: mínimo WCAG AA */

  /* ── Color · marca y semántica ─────────────────────────── */
  --c-brand:         #AAFF00;
  /* Verde legible sobre blanco: el neón da 1.9:1 de contraste y no
     pasa WCAG. Este tono mantiene la identidad y llega a 4.8:1, así
     que se usa para texto y controles sobre las tarjetas. */
  --c-brand-ink:     #4E7A00;
  --c-brand-dim:     rgba(170, 255, 0, 0.12);
  --c-brand-line:    rgba(170, 255, 0, 0.28);
  --c-brand-glow:    rgba(170, 255, 0, 0.35);

  --c-amber:         #F5A524;   /* sobre fondo oscuro */
  --c-amber-ink:     #9C6000;   /* sobre fondo claro: 5.1:1 (WCAG AA).
                                   El ámbar brillante sobre blanco da 1.9:1. */
  --c-red:           #F04438;
  --c-wsp:           #25D366;

  /* ── Color · bordes ────────────────────────────────────── */
  --c-line:          rgba(255, 255, 255, 0.08);
  --c-line-strong:   rgba(255, 255, 255, 0.16);
  --c-line-ink:      rgba(12, 14, 12, 0.10);

  /* ── Tipografía ────────────────────────────────────────── */
  --font-ui:      'Barlow', 'Barlow Fallback', system-ui, sans-serif;
  --font-display: 'Barlow Condensed', 'Barlow Condensed Fallback',
                  'Barlow', system-ui, sans-serif;

  --fs-2xs:  0.6875rem;  /* 11 */
  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;  /* 15 */
  --fs-md:   1rem;       /* 16 */
  --fs-lg:   1.125rem;   /* 18 */
  --fs-xl:   1.375rem;   /* 22 */
  --fs-2xl:  1.75rem;    /* 28 */
  --fs-3xl:  2.25rem;    /* 36 */
  --fs-4xl:  3rem;       /* 48 */
  --fs-5xl:  4rem;       /* 64 */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-wider:    0.14em;

  /* ── Espacio · ritmo de 4 px ───────────────────────────── */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.25rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* Contenedor y gutters */
  --w-page:    1440px;
  --w-prose:   62ch;
  --gutter:    clamp(1rem, 4vw, 3rem);
  --section-y: clamp(3.5rem, 8vw, 7rem);

  /* ── Radios ────────────────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 999px;

  /* ── Sombras ───────────────────────────────────────────── */
  --sh-sm:  0 1px 2px rgba(0, 0, 0, 0.28);
  --sh-md:  0 8px 24px rgba(0, 0, 0, 0.34);
  --sh-lg:  0 20px 48px rgba(0, 0, 0, 0.44);
  --sh-xl:  0 32px 80px rgba(0, 0, 0, 0.52);
  --sh-brand: 0 12px 40px rgba(170, 255, 0, 0.22);
  --sh-stage: 0 10px 30px rgba(0, 0, 0, 0.30);

  /* ── Movimiento ────────────────────────────────────────── */
  --d-fast:  140ms;
  --d-base:  220ms;
  --d-slow:  380ms;
  --d-slower: 620ms;

  --e-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ── Capas ─────────────────────────────────────────────── */
  --z-base:     1;
  --z-sticky:   100;
  --z-nav:      200;
  --z-drawer:   300;
  --z-overlay:  290;
  --z-toast:    400;
  --z-loader:   500;

  /* ── Alturas de referencia ─────────────────────────────── */
  --h-announce: 34px;
  --h-nav:      68px;
}

/* Respeta a quien pidió menos movimiento: no es opcional. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast:  1ms;
    --d-base:  1ms;
    --d-slow:  1ms;
    --d-slower: 1ms;
  }
}