/* ==========================================================================
   TECNODUR · DESIGN TOKENS
   Single source of truth. Do not hard-code values elsewhere.
   ========================================================================== */

:root {
  /* ──────────────────────────────────────────────────────────────────
     PALETA OFICIAL TECNODUR
     · Azul marino #37475F · Verde lima #C0D538 · Gris #888 · Blanco #FFF
     Aliasses --ink / --cobalt mantenidos por compatibilidad interna
     pero apuntan a los colores oficiales.
     ────────────────────────────────────────────────────────────────── */

  /* ---------- COLOR · Marca primaria ---------- */
  --navy:       #37475F;   /* Azul marino profundo Tecnodur — texto, títulos, menús, logo */
  --navy-d:     #232E40;   /* Variante oscura — para secciones invertidas */
  --navy-dd:    #161D28;   /* Variante aún más oscura — para máximo contraste */
  --navy-l:     #5B6E8C;   /* Variante clara — hover suave, sub-elementos */
  --navy-bg:    #F2F4F8;   /* Tintado muy suave para fondos */

  /* ---------- COLOR · Acento de marca ---------- */
  --lime:       #C0D538;   /* Verde lima Tecnodur — CTA, acentos, hover */
  --lime-d:     #A4B82C;   /* Hover/active sobre lime */
  --lime-dd:    #7A8E1A;   /* Variante con contraste suficiente para texto sobre blanco (AA) */
  --lime-l:     #D6E370;   /* Lime claro — fondos sutiles */
  --lime-bg:    #F5F8DA;   /* Fondo tintado muy suave */

  /* ---------- COLOR · Neutros ---------- */
  --gray:       #888888;   /* Gris medio Tecnodur — textos secundarios, pie */
  --gray-d:     #5F5F5F;   /* Texto secundario sobre fondos claros con más contraste */
  --gray-l:     #C8C8C8;   /* Bordes, divisores más visibles */
  --mist:       #E8E8E5;   /* Hairlines / dividers sutiles */
  --paper:      #FFFFFF;   /* Blanco puro — fondo principal */
  --paper-pure: #FFFFFF;   /* Idem (alias) */
  --paper-soft: #FAFBFC;   /* Para áreas que necesitan diferenciarse de fondo blanco */

  /* ---------- ALIASES (compatibilidad interna) ----------
     El sistema anterior usaba --ink y --cobalt como ancla.
     Se redirigen a los colores de marca para no romper components.css. */
  --ink:        var(--navy);
  --graphite:   var(--navy-d);
  --steel-900:  var(--navy-dd);
  --steel-700:  var(--gray-d);
  --steel-500:  var(--gray);
  --steel-300:  var(--gray-l);
  --steel-200:  #DDE0E5;

  --cobalt:     var(--lime-dd);   /* para texto pequeño en cobalto → lime con contraste */
  --cobalt-d:   var(--lime-d);
  --cobalt-l:   var(--lime);      /* para bloques grandes / focus ring */
  --cobalt-bg:  var(--lime-bg);

  /* ---------- COLOR · Señal (uso raro) ---------- */
  --signal:     #D72F2F;   /* Reservado a emphasis PCI / advertencias críticas */

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — modular, 1.25 ratio, anchored at 16px body */
  --fs-micro:   0.6875rem;   /* 11px — eyebrows, ISO labels */
  --fs-xs:      0.75rem;     /* 12px — captions, mono data */
  --fs-sm:      0.875rem;    /* 14px — UI body */
  --fs-base:    1rem;        /* 16px — body */
  --fs-md:      1.125rem;    /* 18px — lead paragraphs */
  --fs-lg:      1.375rem;    /* 22px — H4 */
  --fs-xl:      1.75rem;     /* 28px — H3 */
  --fs-2xl:     2.25rem;     /* 36px — H2 small */
  --fs-3xl:     3rem;        /* 48px — H2 */
  --fs-4xl:     4rem;        /* 64px — display medium */
  --fs-5xl:     5.5rem;      /* 88px — display large */
  --fs-6xl:     7.5rem;      /* 120px — counter numbers */

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight: -0.025em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.08em;
  --tracking-wider: 0.14em;
  --tracking-mono:  0.02em;

  /* ---------- SPACING — 4px base ---------- */
  --sp-1:  0.25rem;   /* 4 */
  --sp-2:  0.5rem;    /* 8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  3rem;      /* 48 */
  --sp-8:  4rem;      /* 64 */
  --sp-9:  6rem;      /* 96 */
  --sp-10: 8rem;      /* 128 */
  --sp-11: 10rem;     /* 160 — standard section vertical rhythm */
  --sp-12: 14rem;     /* 224 — hero / signature sections */

  /* ---------- LAYOUT ---------- */
  --container-max: 1440px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --grid-cols: 12;
  --grid-gap:  clamp(1rem, 2vw, 1.5rem);

  /* ---------- RADIUS — industrial = 0. Do not change. ---------- */
  --radius: 0;

  /* ---------- ELEVATION — minimal, technical ---------- */
  --shadow-1: 0 1px 0 0 var(--mist);                                 /* hairline */
  --shadow-2: 0 1px 2px rgba(10,10,10,0.04), 0 0 0 1px var(--mist);   /* card resting */
  --shadow-3: 0 8px 24px rgba(10,10,10,0.08), 0 0 0 1px var(--mist);  /* card hover */
  --shadow-focus: 0 0 0 3px rgba(192,213,56,0.45);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    600ms;

  /* ---------- Z-INDEX ---------- */
  --z-nav:     50;
  --z-overlay: 80;
  --z-modal:   100;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}