/* ==========================================================================
   ACCESORIOS HDPE — Design Tokens
   Paleta industrial premium: grafito + gris acero + blanco técnico + azul.
   ========================================================================== */

@font-face {
  font-family: "Coolvetica";
  src: url("../fonts/coolvetica.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color: base oscura (grafito / carbón) ---- */
  --c-graphite-950: #06090d;
  --c-graphite-900: #0b1016;
  --c-graphite-850: #10161e;
  --c-graphite-800: #161d27;
  --c-graphite-700: #1d2530;
  --c-graphite-600: #2a3441;
  --c-graphite-500: #3c4856;

  /* ---- Color: gris acero / claro ---- */
  --c-steel-100: #f4f6f8;
  --c-steel-200: #e7ebef;
  --c-steel-300: #d3dae0;
  --c-steel-400: #aab6c1;
  --c-steel-500: #7c8a97;
  --c-steel-600: #5c6a77;

  /* ---- Blanco técnico ---- */
  --c-white: #ffffff;
  --c-off-white: #f8f9fb;

  /* ---- Azul industrial / eléctrico (acento) ---- */
  --c-blue-900: #052042;
  --c-blue-800: #0a3466;
  --c-blue-700: #0d4a8f;
  --c-blue-600: #1465c4;
  --c-blue-500: #1c7de8;
  --c-blue-400: #3f9bff;
  --c-blue-300: #7fbcff;
  --c-blue-100: #dcedff;

  /* ---- Estados ---- */
  --c-success: #1fa972;
  --c-whatsapp: #1fa972;

  /* ---- Superficies semánticas ---- */
  --bg-dark: var(--c-graphite-950);
  --bg-dark-alt: var(--c-graphite-900);
  --bg-panel-dark: var(--c-graphite-850);
  --bg-light: var(--c-off-white);
  --bg-light-alt: var(--c-steel-100);
  --bg-white: var(--c-white);

  --text-on-dark: var(--c-steel-100);
  --text-on-dark-dim: var(--c-steel-400);
  --text-on-light: var(--c-graphite-900);
  --text-on-light-dim: var(--c-steel-600);

  --border-dark: rgba(255, 255, 255, 0.08);
  --border-dark-strong: rgba(255, 255, 255, 0.14);
  --border-light: rgba(6, 9, 13, 0.1);
  --border-light-strong: rgba(6, 9, 13, 0.16);

  --accent: var(--c-blue-500);
  --accent-strong: var(--c-blue-600);
  --accent-soft: var(--c-blue-100);

  /* ---- Tipografía ---- */
  --font-display: "Barlow Condensed", "Oswald", sans-serif;
  --font-heading: "Barlow Condensed", "Oswald", sans-serif;
  --font-body: "Plus Jakarta Sans", "Work Sans", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;

  /* ---- Escala tipográfica fluida ---- */
  --fs-h1: clamp(2.6rem, 5vw + 1rem, 5rem);
  --fs-h2: clamp(2rem, 3vw + 1rem, 3.2rem);
  --fs-h3: clamp(1.4rem, 1.4vw + 1rem, 2rem);
  --fs-h4: clamp(1.1rem, 0.6vw + 1rem, 1.35rem);
  --fs-lead: clamp(1.05rem, 0.5vw + 1rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* ---- Espaciado ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* ---- Layout ---- */
  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --header-h: 92px;
  --header-h-scrolled: 68px;
  --topbar-h: 40px;

  /* ---- Sombra ---- */
  --shadow-sm: 0 2px 8px rgba(6, 9, 13, 0.08);
  --shadow-md: 0 8px 24px rgba(6, 9, 13, 0.12);
  --shadow-lg: 0 20px 48px rgba(6, 9, 13, 0.28);
  --shadow-glow: 0 0 0 1px rgba(63, 155, 255, 0.25), 0 12px 32px rgba(20, 101, 196, 0.25);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 500ms;

  /* ---- Z-index ---- */
  --z-header: 500;
  --z-megamenu: 490;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 950;
}