/* =========================================================
   Dimagus SRL — Tokens de diseño
   Fuente: DISENO.md. No cambiar valores sin actualizar ese archivo.
   ========================================================= */

/* Las fuentes se cargan con <link> en el <head> de cada página (más rápido que @import):
   https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Barlow:wght@400;500;600&family=Bebas+Neue&family=IBM+Plex+Mono:wght@500&display=swap */

:root {
  /* ---- Marca: acero ---- */
  --acero-profundo: #083144;
  --acero: #076B79;
  --acero-claro: #079FB1;
  --acero-niebla: #8FC4C2;

  /* ---- Marca: fundición ---- */
  --fundicion: #FD8204;          /* botones: siempre con texto grafito-900 */
  --fundicion-hover: #E87603;
  --brasa: #FC2901;              /* solo decorativo, nunca texto */
  --fundicion-oscura: #C8350A;   /* naranja para texto sobre claro */
  --oxido: #9D0A07;

  /* ---- Neutros ---- */
  --grafito-900: #14181B;
  --grafito-800: #1E252B;
  --grafito-700: #303030;
  --gris-acero: #5B6670;
  --gris-claro: #9AA5AE;
  --plata: #B9C2C9;
  --hormigon: #F4F2EE;
  --blanco: #FFFFFF;

  /* ---- Roles (tema claro por defecto) ---- */
  --fondo: var(--hormigon);
  --texto: var(--grafito-700);
  --texto-suave: var(--gris-acero);
  --enlace: var(--acero);
  --borde: #D9D6D0;
  --accion: var(--fundicion);
  --texto-accion: var(--grafito-900);
  --foco: var(--acero-claro);
  --error: var(--fundicion-oscura);

  /* ---- Degradado de marca (la "D") ---- */
  --degradado-marca: linear-gradient(180deg, #083144 0%, #076B79 35%, #9D0A07 65%, #FC2901 82%, #FD8204 100%);
  --degradado-marca-h: linear-gradient(90deg, #083144 0%, #076B79 35%, #9D0A07 65%, #FC2901 82%, #FD8204 100%);

  /* ---- Textura de metal cepillado (reemplazo de fotos faltantes) ---- */
  --metal-cepillado:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #2B353D 0%, #1E252B 45%, #262F36 100%);

  /* ---- Tipografía ---- */
  --f-display: 'Bebas Neue', 'Barlow Condensed', Impact, sans-serif;
  --f-titulo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-texto: 'Barlow', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --t-display-xl: clamp(3.5rem, 1.6rem + 8vw, 8rem);
  --t-h1: clamp(2.75rem, 1.4rem + 5.6vw, 5.5rem);
  --t-h2: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --t-h3: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  --t-etiqueta: clamp(.8125rem, .78rem + .15vw, .875rem);
  --t-texto: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  --t-chico: .9375rem;

  /* ---- Espaciado (base 8) ---- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;

  --contenedor: 1280px;
  --margen: clamp(20px, 4vw, 40px);
  --radio: 2px;

  /* ---- Movimiento ---- */
  --rapido: 150ms;
  --normal: 250ms;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

/* Secciones oscuras: agregar la clase .oscuro */
.oscuro {
  --fondo: var(--grafito-900);
  --texto: var(--plata);
  --texto-suave: var(--gris-claro);
  --enlace: var(--acero-niebla);
  --borde: #2E3840;
  background: var(--fondo);
  color: var(--texto);
}

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