/* ══════════════════════════════════════
   Rematech Empresas — Design tokens (REBRAND dark + verde menta)
   Fuente de verdad: rematech-home-rebrand-mockup.html
   ══════════════════════════════════════ */
:root {
  /* ── VERDE MENTA (acento protagonista) ── */
  --mint:        #2EE89C;
  --mint-bright: #54FFB4;
  --mint-deep:   #16B377;
  --mint-dark:   #0A3D2A;

  /* ── TINTAS OSCURAS (fondos: negro con toque verde-frío) ── */
  --ink:      #070B0A;   /* fondo base de la página */
  --ink-2:    #0B1210;   /* secciones alternas */
  --ink-3:    #101916;   /* superficies elevadas / inputs */
  --ink-card: #0E1714;   /* cards */
  --ink-line: #1C2A25;   /* bordes sutiles */

  /* ── TEXTO sobre oscuro ── */
  --cloud: #FFFFFF;      /* texto principal */
  --mist:  #C9D4CF;      /* texto secundario */
  --mute:  #7E8D87;      /* texto terciario / labels */

  /* ── SECCIONES CLARAS (v2: frío + cálido para alternar) ── */
  --light:      #F1F5F2;   /* claro frío (verde-grisáceo) */
  --light-warm: #FBF6EE;   /* claro cálido (crema) */
  --light-2:    #FFFFFF;
  --light-line: #E4EBE6;
  --light-ink:  #0A1310;
  --light-mute: #5C6B64;

  /* ── ACENTO IRIDISCENTE (pétalos azul→púrpura→magenta) ── */
  --iris-1: #4B7BFF;
  --iris-2: #8B5CF6;
  --iris-3: #E84FD0;

  /* ── CÁLIDOS v2 (acento nuevo — usar con moderación, máx 1-2/pantalla) ── */
  --coral: #FF8A5B;
  --amber: #FFC24B;
  /* ── TEAL (apoyo en gradientes verdes) ── */
  --teal:  #1FB9A6;

  /* ── ALIAS DE COMPATIBILIDAD (mapeo viejo→nuevo) ──
     components.css y base.css siguen referenciando estos nombres.
     Se re-apuntan al nuevo sistema dark/mint. NO romper. */
  --navy-900: #04100B;
  --navy:     var(--ink);
  --navy-700: var(--ink-3);
  --navy-600: var(--ink-3);
  --navy-100: var(--ink-line);
  --navy-50:  var(--ink-2);
  --navy-dark:#04100B;

  --orange-900: var(--mint-deep);
  --orange-700: var(--mint-deep);
  --orange:     var(--mint);
  --orange-400: var(--mint-bright);
  --orange-100: var(--mint-dark);
  --orange-50:  var(--mint-dark);

  --slate-900: var(--cloud);
  --slate-700: var(--mist);
  --slate:     var(--mute);
  --slate-500: var(--mute);
  --slate-400: var(--mute);
  --slate-300: var(--ink-line);
  --slate-200: var(--ink-line);
  --slate-100: var(--ink-3);
  --slate-50:  var(--ink-2);
  --white:     #FFFFFF;

  /* ── Semantic ── */
  --success: #2EE89C;
  --warning: #F59E0B;
  --danger:  #FF6B6B;

  /* ── Typography (REBRAND: Outfit display + DM Sans body) ── */
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluid type scale (sin cambios) */
  --fs-xs:    0.8125rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --fs-3xl:   clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem);
  --fs-hero:  clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);

  /* ── Spacing (sin cambios) ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Radius (REBRAND: más redondeado, pill en botones) ── */
  --radius-sm:   6px;
  --radius:      12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-pill: 100px;

  /* ── Shadows (oscuras) ── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 8px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.5);
  --glow-mint: 0 10px 30px rgba(46,232,156,.35);

  /* ── Layout (sin cambios) ── */
  --container-max: 1240px;
  --container-pad: 2rem;
  --nav-height:    80px;

  /* ── Motion ── */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

@media (max-width: 768px) {
  :root {
    --container-pad: 1.25rem;
    --nav-height:    64px;
  }
}