/* =========================================================================
   Tornillin · Design Tokens
   Variables base extraídas del logo, look & feel 2026 y catálogo real.
   Importar antes de tornillin.css.
   ========================================================================= */

/* ------- Mont (familia oficial) ------- */
@font-face {
  font-family: "Mont";
  src: url("../assets/fuentes/Mont-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mont";
  src: url("../assets/fuentes/Mont-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Mont";
  src: url("../assets/fuentes/Mont-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mont";
  src: url("../assets/fuentes/Mont-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Mont";
  src: url("../assets/fuentes/Mont-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mont";
  src: url("../assets/fuentes/Mont-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* =========================================================
     1. COLOR — paleta real Tornillin
     ========================================================= */

  /* Marca · Rojo Tornillin (ribbon, headlines, CTAs) */
  --tor-red-50:  #FBECEA;
  --tor-red-100: #F4CFCB;
  --tor-red-200: #E89B92;
  --tor-red-300: #D86A5C;
  --tor-red-400: #C84738;
  --tor-red-500: #BC3A2F; /* primario · color del logo y banner */
  --tor-red-600: #9E2E25; /* hover / strong */
  --tor-red-700: #7F2520; /* pressed */
  --tor-red-900: #4A1612;

  /* Marca · Acero Tornillin (mascota, "ELÉCTRICO", divisores fuertes) */
  --tor-steel-50:  #F4F4F5;
  --tor-steel-100: #E6E6E8;
  --tor-steel-200: #C9C9CD;
  --tor-steel-300: #A8A8AD;
  --tor-steel-400: #8A8A8E; /* gris del logo "ELÉCTRICO" */
  --tor-steel-500: #6E6E72;
  --tor-steel-600: #555558;
  --tor-steel-700: #3D3D40;
  --tor-steel-900: #1C1C1F;

  /* Neutrales · superficie / texto */
  --tor-ink:        #1C1C1F; /* texto principal */
  --tor-ink-soft:   #2C2C2F;
  --tor-muted:      #5B5B5F; /* texto secundario */
  --tor-border:     #E2E2E4;
  --tor-border-soft:#EFEFF1;
  --tor-surface:    #FFFFFF;
  --tor-surface-2:  #F7F7F8;
  --tor-surface-3:  #EFEFF1; /* relleno del patrón hexagonal */
  --tor-black:      #161618;

  /* Acentos por categoría de servicio (look & feel 2026) */
  --tor-green-500:  #6BA630; /* energías renovables / sustentable */
  --tor-green-100:  #E2F1D2;
  --tor-amber-500:  #E8A93C; /* iluminación / automatización (cálido) */
  --tor-amber-100:  #FBEACE;
  --tor-blue-500:   #3E78C8; /* seguridad / industrial */
  --tor-blue-100:   #DCE7F6;

  /* Auxiliares de campañas */
  --tor-cardboard:  #C7986A; /* cajas mascota */
  --tor-cardboard-shadow: #8E6A47;

  /* Estados (derivados con consistencia visual) */
  --tor-success: #4E9F2A;
  --tor-warning: #D98B0C;
  --tor-danger:  var(--tor-red-500);
  --tor-info:    #2A6FB5;

  /* Aliases semánticos */
  --color-bg:        var(--tor-surface);
  --color-bg-alt:    var(--tor-surface-2);
  --color-surface:   var(--tor-surface);
  --color-fg:        var(--tor-ink);
  --color-muted:     var(--tor-muted);
  --color-border:    var(--tor-border);
  --color-primary:   var(--tor-red-500);
  --color-secondary: var(--tor-steel-400);
  --color-accent:    var(--tor-red-500);

  /* =========================================================
     2. TIPOGRAFÍA — Mont
     ========================================================= */
  --font-display: "Mont", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:    "Mont", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "IBM Plex Mono", Menlo, monospace;

  /* Escala fluida (clamp(min, vw, max)) */
  --fs-display-xl: clamp(48px, 7vw, 88px);   /* hero industrial */
  --fs-display-lg: clamp(36px, 5vw, 64px);   /* portadas, banners */
  --fs-display-md: clamp(28px, 3.6vw, 44px); /* secciones */
  --fs-h1:         clamp(28px, 3vw, 40px);
  --fs-h2:         clamp(22px, 2.4vw, 30px);
  --fs-h3:         clamp(18px, 1.6vw, 22px);
  --fs-h4:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    13px;
  --fs-micro:      11px;

  /* Pesos */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-bold:    700;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.15;
  --lh-base:    1.45;
  --lh-relaxed: 1.6;

  /* Letter spacing */
  --ls-tight:   -0.01em;
  --ls-base:    0;
  --ls-wide:    0.04em;
  --ls-allcaps: 0.06em; /* mayúsculas tipo "TODO PARA TU PROYECTO" */

  /* =========================================================
     3. ESPACIADO — base 4
     ========================================================= */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 880px;
  --container-wide: 1440px;
  --gutter: clamp(16px, 3vw, 32px);

  /* =========================================================
     4. RADIOS
     ========================================================= */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* =========================================================
     5. SOMBRAS
     ========================================================= */
  --shadow-xs: 0 1px 2px rgba(28,28,31,.05);
  --shadow-sm: 0 2px 6px rgba(28,28,31,.06), 0 1px 2px rgba(28,28,31,.04);
  --shadow-md: 0 6px 16px rgba(28,28,31,.08), 0 2px 6px rgba(28,28,31,.05);
  --shadow-lg: 0 16px 40px rgba(28,28,31,.12), 0 4px 12px rgba(28,28,31,.06);
  --shadow-xl: 0 24px 60px rgba(28,28,31,.16), 0 8px 16px rgba(28,28,31,.08);
  --shadow-red-glow: 0 12px 30px rgba(188,58,47,.28);
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,.06);

  /* =========================================================
     6. BORDES & SHEARS
     ========================================================= */
  --border-hair: 1px solid var(--tor-border);
  --border-soft: 1px solid var(--tor-border-soft);
  --border-strong: 1.5px solid var(--tor-steel-700);
  --shear-angle: 12deg; /* corte diagonal de banners / fotos */

  /* =========================================================
     7. MOTION
     ========================================================= */
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 420ms;

  /* =========================================================
     8. PATRONES DECORATIVOS
     ========================================================= */
  /* Patrón hexagonal sutil (look & feel oficial) */
  --pattern-hex:
    radial-gradient(circle at 20% 30%, var(--tor-border-soft) 1px, transparent 1.5px) 0 0/48px 48px,
    radial-gradient(circle at 70% 80%, var(--tor-border-soft) 1px, transparent 1.5px) 0 0/48px 48px,
    linear-gradient(180deg, var(--tor-surface-2), var(--tor-surface));

  /* Gradiente sutil para banners industriales */
  --gradient-steel: linear-gradient(135deg, var(--tor-steel-700), var(--tor-steel-900));
  --gradient-red:   linear-gradient(135deg, var(--tor-red-500), var(--tor-red-700));
}