/* ============================================================
   Espinel Abogados — Design tokens
   Identidad high-tech · hidrógeno verde: verde eléctrico líder
   sobre petróleo profundo, con chispa ámbar como acento puntual.
   ============================================================ */

:root {
  /* ── Color base (dark, teal-shift techy) ── */
  --ink:            #04130E;   /* fondo casi negro verde-teal */
  --ink-2:         #061B13;   /* fondo alterno secciones */
  --surface:       #08231B;   /* tarjetas / superficies */
  --surface-2:     #0C2E24;   /* superficie elevada */
  --petrol:        #0E5A47;   /* verde petróleo, más eléctrico */
  --petrol-deep:   #06271E;

  /* ── Acento principal: HIDRÓGENO VERDE (eléctrico) ── */
  --energy:        #19F0A0;   /* verde eléctrico H₂ (acento líder) */
  --energy-bright: #54FFBE;   /* verde claro hover */
  --energy-deep:   #0AA06A;   /* verde profundo (texto sobre claro) */
  --energy-soft:   rgba(25, 240, 160, 0.13);
  --energy-glow:   rgba(25, 240, 160, 0.50);
  --on-energy:     #04130E;   /* texto sobre superficies verde brillante */

  /* ── Corriente / electricidad (cian) ── */
  --current:       #18E2D8;   /* cian eléctrico (corriente) */
  --current-soft:  rgba(24, 226, 216, 0.12);

  /* ── Chispa ámbar (acento secundario, uso puntual) ── */
  --spark:         #F5B400;
  --spark-bright:  #FFC829;
  --spark-soft:    rgba(245, 180, 0, 0.14);

  /* ── Texto ── */
  --text:          #EAF2EF;
  --text-strong:   #FFFFFF;
  --muted:         #9DB2AC;
  --muted-2:       #6E847E;

  /* ── Líneas / bordes ── */
  --line:          rgba(234, 242, 239, 0.10);
  --line-strong:   rgba(234, 242, 239, 0.18);
  --line-energy:   rgba(25, 240, 160, 0.32);

  /* ── Superficie clara (cortes high-tech) ── */
  --paper:         #F3F8F5;   /* blanco frío verdoso */
  --paper-2:       #FFFFFF;

  /* ── Gradientes ── */
  --grad-energy:   linear-gradient(120deg, #0FCB86 0%, var(--energy) 52%, var(--energy-bright) 100%);
  --grad-hero:     radial-gradient(120% 90% at 82% -8%, rgba(25,240,160,0.16), transparent 55%),
                   radial-gradient(100% 90% at 12% 92%, rgba(88,165,255,0.12), transparent 55%),
                   radial-gradient(95% 85% at -6% 106%, rgba(40,210,230,0.10), transparent 52%),
                   radial-gradient(60% 50% at 50% 50%, rgba(25,240,160,0.04), transparent 70%),
                   linear-gradient(180deg, var(--ink) 0%, var(--petrol-deep) 130%);
  --grad-surface:  linear-gradient(155deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));

  /* ── Glassmorphism (tarjetas / superficies traslúcidas) ── */
  --glass-bg:      linear-gradient(155deg, rgba(18, 58, 46, 0.55), rgba(8, 35, 27, 0.32));
  --glass-blur:    blur(14px) saturate(1.3);
  --glass-border:  rgba(234, 242, 239, 0.12);
  --glass-sheen:   linear-gradient(155deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 42%);

  /* ── Tipografía ── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala fluida */
  --fs-eyebrow: 0.78rem;
  --fs-body:    clamp(1rem, 0.97rem + 0.18vw, 1.075rem);
  --fs-lead:    clamp(1.12rem, 1.05rem + 0.4vw, 1.35rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --fs-h1:      clamp(2.5rem, 1.7rem + 3.8vw, 4.6rem);
  --fs-display: clamp(3rem, 1.8rem + 5.5vw, 6rem);

  /* ── Espaciado / layout ── */
  --maxw:        1200px;
  --maxw-narrow: 820px;
  --gutter:      clamp(1.25rem, 5vw, 4rem);
  --section-y:   clamp(4.5rem, 9vw, 8rem);

  /* ── Radios ── */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ── Sombras / glow ── */
  --shadow-md:   0 18px 50px -20px rgba(0,0,0,0.6);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 50px -28px rgba(0,0,0,0.8);
  --glow-energy: 0 0 0 1px var(--line-energy), 0 12px 40px -12px var(--energy-glow);
  /* Glow verde eléctrico para realces high-tech (cards, nodos, banda) */
  --glow-h2:        0 0 0 1px var(--line-energy), 0 0 34px -8px var(--energy-glow);
  --glow-h2-strong: 0 0 0 1px rgba(25,240,160,0.45), 0 18px 60px -18px var(--energy-glow);
  /* Glow eléctrico multicapa para cards en hover (verde H₂ + cian corriente) */
  --glow-electric: 0 0 0 1px rgba(25,240,160,0.40),
                   0 0 22px -6px var(--energy-glow),
                   0 0 46px -10px rgba(24,226,216,0.35),
                   0 26px 60px -28px rgba(0,0,0,0.85);

  /* ── Motion ── */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    0.18s;
  --t:         0.32s;
  --t-slow:    0.6s;

  /* ── Z-index ── */
  --z-nav: 100;
  --z-drawer: 120;
  --z-float: 90;
  --z-progress: 110;
}