/* ==========================================================================
   DISFRICAL — Design tokens
   Equivalente a tailwind.config.js: aquí viven TODOS los colores corporativos,
   tipografías, radios, sombras y curvas de animación. Cambia un valor aquí y
   se actualiza en toda la web.
   ========================================================================== */

:root {
  /* ---- Paleta corporativa: FRÍO (azules profundos y gélidos) ---- */
  --frost-950: #030c18;
  --frost-900: #06182d;
  --frost-800: #0a2747;
  --frost-700: #0d3b6b;
  --frost-600: #11579c;
  --frost-500: #1d74d8;
  --frost-400: #4b9bf0;
  --frost-300: #8cc4ff;
  --frost-200: #c4e1ff;
  --frost-100: #e8f3ff;

  /* ---- Paleta corporativa: CALOR (naranjas / rojos sutiles) ---- */
  --heat-700: #b33612;
  --heat-600: #d9481a;
  --heat-500: #f2622a;
  --heat-400: #ff8a4c;
  --heat-300: #ffb48a;
  --heat-100: #fff0e7;

  /* ---- Neutros industriales (acero) ---- */
  --steel-50:  #f6f8fb;
  --steel-100: #eef2f6;
  --steel-200: #dde4ec;
  --steel-300: #c3cdd9;
  --steel-400: #94a3b8;
  --steel-500: #6b7c93;
  --steel-600: #475569;
  --steel-700: #2c3a4d;

  /* ---- Gradientes de marca ---- */
  --grad-thermal: linear-gradient(90deg, var(--frost-400) 0%, #7d8cff 48%, var(--heat-400) 100%);
  --grad-frost:   linear-gradient(135deg, var(--frost-500) 0%, var(--frost-700) 100%);
  --grad-heat:    linear-gradient(135deg, var(--heat-400) 0%, var(--heat-600) 100%);

  /* ---- Tipografía ---- */
  --font-sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl:  clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-3xl:  clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --fs-hero: clamp(2.6rem, 1.4rem + 5.6vw, 6.4rem);

  /* ---- Forma ---- */
  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(72px, 10vw, 140px);
  --nav-h: 72px;

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.6s;

  /* ---- Semánticos (modo claro) ---- */
  --bg:        #f9fafb;
  --bg-2:      #eaeef4;
  --surface:   #ffffff;
  --surface-2: #f8fafc;
  --ink:       #0a1a2e;
  --ink-2:     #3d4f66;
  --ink-3:     #6b7c93;
  --line:      rgba(10, 26, 46, 0.10);
  --line-2:    rgba(10, 26, 46, 0.18);
  --accent:    var(--frost-500);
  --accent-2:  var(--frost-600);
  --heat:      var(--heat-500);
  --glass:      rgba(255, 255, 255, 0.66);
  --glass-solid: rgba(255, 255, 255, 0.94);
  --glass-line: rgba(255, 255, 255, 0.75);
  --shadow-1: 0 1px 2px rgba(6, 24, 45, 0.06), 0 6px 24px -8px rgba(6, 24, 45, 0.12);
  --shadow-2: 0 2px 6px rgba(6, 24, 45, 0.06), 0 30px 60px -20px rgba(6, 24, 45, 0.28);
  --map-filter: grayscale(1) contrast(1.05) brightness(1.04);

  color-scheme: light;
}

/* ---- Modo oscuro elegante ---- */
:root[data-theme="dark"] {
  --bg:        #040b16;
  --bg-2:      #071324;
  --surface:   #0a1728;
  --surface-2: #0d1d33;
  --ink:       #e9f1fb;
  --ink-2:     #a9bad0;
  --ink-3:     #7186a1;
  --line:      rgba(170, 200, 240, 0.10);
  --line-2:    rgba(170, 200, 240, 0.20);
  --accent:    var(--frost-400);
  --accent-2:  var(--frost-300);
  --heat:      var(--heat-400);
  --glass:      rgba(8, 20, 36, 0.62);
  --glass-solid: rgba(8, 20, 36, 0.95);
  --glass-line: rgba(140, 196, 255, 0.14);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px -10px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 40px 80px -24px rgba(0, 0, 0, 0.8);
  --map-filter: grayscale(1) invert(0.92) hue-rotate(180deg) contrast(0.9) brightness(0.95);

  color-scheme: dark;
}