/* ============================================================
   EDA — Eléctricas de América
   Colors & Type foundations
   ============================================================
   This file defines the base visual language of EDA's digital
   presence. Colors are anchored on the existing EDA logo
   (teal/cyan + deep petrol blue) and extended into a full
   multinational-grade palette inspired by Hitachi Energy,
   GE Vernova, and ABB Medium Voltage Digital Substations.
   ============================================================ */

/* ---------- FONTS (Google Fonts substitutes) ---------- */
/* Display / UI: Manrope — geometric, neutral, multinational
   Serif (editorial accents only): Fraunces is avoided per brand
   — we instead use sparing use of Manrope with wider tracking
   for a more editorial feel. Mono: JetBrains Mono for code/data. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ===========================================================
     CORE BRAND — derived from EDA logo
     =========================================================== */
  --eda-cyan-50:   #eef7fb;
  --eda-cyan-100:  #d7ecf3;
  --eda-cyan-200:  #b0d9e7;
  --eda-cyan-300:  #82c1d5;
  --eda-cyan-400:  #5ba4c5;   /* logo dot color */
  --eda-cyan-500:  #3d8aad;
  --eda-cyan-600:  #2b7a95;   /* logo text color — PRIMARY */
  --eda-cyan-700:  #215e73;
  --eda-cyan-800:  #1a4656;
  --eda-cyan-900:  #0f2b35;

  /* Deep petrol — authority / depth (hero backgrounds, headers) */
  --eda-deep-50:   #e8eef2;
  --eda-deep-100:  #c5d3dd;
  --eda-deep-200:  #8ea7b6;
  --eda-deep-300:  #587a8d;
  --eda-deep-400:  #2f546a;
  --eda-deep-500:  #163a50;
  --eda-deep-600:  #0d2b3d;
  --eda-deep-700:  #081f2d;   /* hero bg, dark mode surface */
  --eda-deep-800:  #051624;
  --eda-deep-900:  #020d17;

  /* Neutrals — warm industrial grays */
  --neutral-0:     #ffffff;
  --neutral-50:    #f7f9fa;
  --neutral-100:   #eef2f5;
  --neutral-200:   #dfe5ea;
  --neutral-300:   #c4ccd3;
  --neutral-400:   #98a2ac;
  --neutral-500:   #6c7680;
  --neutral-600:   #4a535c;
  --neutral-700:   #323a42;
  --neutral-800:   #1f262c;
  --neutral-900:   #0e1316;

  /* Signal / accent — safety-inspired, sparing use */
  --signal-amber:  #e8a948;    /* electrical warning, hero highlights */
  --signal-amber-soft: #f6d79d;
  --signal-green:  #2f9a6e;    /* online / success / commissioned */
  --signal-red:    #c9453a;    /* faults, errors */

  /* ===========================================================
     SEMANTIC TOKENS
     =========================================================== */
  --fg-1:          var(--neutral-900);    /* headlines, primary text */
  --fg-2:          var(--neutral-700);    /* body text */
  --fg-3:          var(--neutral-500);    /* secondary / captions */
  --fg-4:          var(--neutral-400);    /* disabled / dividers */
  --fg-on-dark:    #ffffff;
  --fg-on-dark-2:  rgba(255,255,255,.78);
  --fg-on-dark-3:  rgba(255,255,255,.55);

  --bg-canvas:     var(--neutral-0);
  --bg-subtle:     var(--neutral-50);
  --bg-muted:      var(--neutral-100);
  --bg-dark:       var(--eda-deep-700);
  --bg-dark-2:     var(--eda-deep-800);

  --border-1:      rgba(15, 43, 53, .08);
  --border-2:      rgba(15, 43, 53, .16);
  --border-strong: var(--eda-cyan-600);
  --border-on-dark: rgba(255,255,255,.14);

  --accent:        var(--eda-cyan-600);
  --accent-hover:  var(--eda-cyan-700);
  --accent-soft:   var(--eda-cyan-50);
  --accent-ring:   rgba(43, 122, 149, .28);

  /* ===========================================================
     TYPE SYSTEM
     =========================================================== */
  --font-sans:  'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  /* Fluid display type — for multinational hero headlines */
  --fs-display-xl: clamp(52px, 7.2vw, 112px);   /* hero */
  --fs-display-lg: clamp(40px, 5vw, 72px);
  --fs-display-md: clamp(32px, 3.6vw, 56px);
  --fs-h1: clamp(32px, 3vw, 48px);
  --fs-h2: clamp(26px, 2.2vw, 36px);
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Line-heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  /* Tracking */
  --tr-tight:   -0.025em;
  --tr-normal:  0;
  --tr-wide:    0.04em;
  --tr-eyebrow: 0.16em;

  /* ===========================================================
     SPACING — 4px base scale
     =========================================================== */
  --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;
  --space-40: 160px;

  /* ===========================================================
     RADII — restrained; multinational brands use small radii
     =========================================================== */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ===========================================================
     SHADOWS — subtle, editorial
     =========================================================== */
  --shadow-xs:  0 1px 2px rgba(8, 31, 45, 0.06);
  --shadow-sm:  0 2px 8px rgba(8, 31, 45, 0.06), 0 1px 2px rgba(8, 31, 45, 0.04);
  --shadow-md:  0 8px 24px -6px rgba(8, 31, 45, 0.10), 0 2px 6px rgba(8, 31, 45, 0.05);
  --shadow-lg:  0 24px 48px -12px rgba(8, 31, 45, 0.18), 0 4px 10px rgba(8, 31, 45, 0.06);
  --shadow-xl:  0 40px 80px -20px rgba(8, 31, 45, 0.28);
  --shadow-inset-hairline: inset 0 0 0 1px rgba(255,255,255,.06);

  /* ===========================================================
     MOTION
     =========================================================== */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   160ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-hero:   800ms;

  /* ===========================================================
     LAYOUT
     =========================================================== */
  --container-max: 1400px;
  --container-pad: clamp(20px, 4vw, 64px);
  --grid-gap: clamp(16px, 2vw, 32px);
}

/* ===========================================================
   ELEMENT DEFAULTS
   =========================================================== */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-canvas);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--fg-1); margin: 0; }
h1 { font-size: var(--fs-h1); font-weight: var(--fw-semi); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semi); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semi); line-height: var(--lh-snug); }

p  { margin: 0; color: var(--fg-2); line-height: var(--lh-normal); text-wrap: pretty; }
small { font-size: var(--fs-caption); color: var(--fg-3); }

/* Eyebrow — used above section headings, like HEA/ABB style */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

/* Display class — for big editorial hero headlines */
.display {
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-light);   /* multinational feel: light display */
  color: var(--fg-1);
}
.display strong, .display .accent { font-weight: var(--fw-semi); color: var(--accent); }

/* Editorial lead — subhead under a display */
.lead {
  font-size: var(--fs-body-lg);
  color: var(--fg-2);
  line-height: var(--lh-loose);
  max-width: 62ch;
}

/* Mono — used for technical specs, codes, standards (IEC 61850 etc) */
.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: 0;
}