/* ============================================================
   Lean Hydrogen — Colors & Type
   Source of truth: Manual de Identidad (Grooveland)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* Bundled brand fonts — full Montserrat family from /fonts.
   These take precedence over the Google Fonts CDN load above so layouts work
   offline and bundle uses the licensed local files. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100; src: url('fonts/Montserrat-Thin.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 100; src: url('fonts/Montserrat-ThinItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 200; src: url('fonts/Montserrat-ExtraLight.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 200; src: url('fonts/Montserrat-ExtraLightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 300; src: url('fonts/Montserrat-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 300; src: url('fonts/Montserrat-LightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; src: url('fonts/Montserrat-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 400; src: url('fonts/Montserrat-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; src: url('fonts/Montserrat-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 500; src: url('fonts/Montserrat-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; src: url('fonts/Montserrat-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 600; src: url('fonts/Montserrat-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; src: url('fonts/Montserrat-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 700; src: url('fonts/Montserrat-BoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; src: url('fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 800; src: url('fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; src: url('fonts/Montserrat-Black.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-style: italic; font-weight: 900; src: url('fonts/Montserrat-BlackItalic.ttf') format('truetype'); font-display: swap; }

:root {
  /* ---------- BRAND COLORS (from PDF, Pantone-based) ---------- */
  /* Principal */
  --lh-yellow: #E0E722;       /* Pantone 388 C — accent / hydrogen energy */
  --lh-cyan:   #00B5E2;       /* Pantone 306 C — electron / technology */

  /* Secundarios */
  --lh-navy:   #001A70;       /* Pantone 662 C — primary brand, text, logo */
  --lh-blue:   #307FE2;       /* Pantone 2727 C — interactive, accents */

  /* Navy tints (90→50% from the manual) */
  --lh-navy-90: #1A3180;
  --lh-navy-80: #334890;
  --lh-navy-70: #4D5FA0;
  --lh-navy-60: #6676B0;
  --lh-navy-50: #808DC0;

  /* Blue tints */
  --lh-blue-90: #4790E5;
  --lh-blue-80: #5FA0E8;
  --lh-blue-70: #77B0EC;
  --lh-blue-60: #8FC0EF;
  --lh-blue-50: #A7CFF3;

  /* Pure black (manual reference) */
  --lh-black: #0B0F1A;

  /* ---------- NEUTRAL SCALE (technical greys) ---------- */
  --lh-white: #FFFFFF;
  --lh-grey-50:  #F6F8FB;   /* page background tint */
  --lh-grey-100: #EEF2F7;   /* technical section bg */
  --lh-grey-200: #DDE4ED;   /* hairline borders */
  --lh-grey-300: #C2CCD8;
  --lh-grey-400: #94A2B3;
  --lh-grey-500: #67748A;
  --lh-grey-600: #4A5668;
  --lh-grey-700: #2F3947;
  --lh-grey-800: #1A2332;
  --lh-grey-900: #0F1722;

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg:         var(--lh-white);
  --bg-subtle:  var(--lh-grey-50);
  --bg-muted:   var(--lh-grey-100);
  --bg-inverse: var(--lh-navy);

  --fg:         var(--lh-navy);          /* default text — navy, not pure black */
  --fg-strong:  var(--lh-black);
  --fg-muted:   var(--lh-grey-600);
  --fg-subtle:  var(--lh-grey-500);
  --fg-on-dark: var(--lh-white);

  --border:        var(--lh-grey-200);
  --border-strong: var(--lh-grey-300);
  --border-focus:  var(--lh-blue);

  --accent:        var(--lh-blue);       /* primary interactive */
  --accent-hover:  var(--lh-navy-90);
  --accent-press:  var(--lh-navy);

  --energy:        var(--lh-yellow);     /* energy / highlight (use sparingly) */
  --tech:          var(--lh-cyan);       /* technology / data viz */

  /* Status (engineered to harmonize) */
  --success:    #1F9D55;
  --success-bg: #E6F6EE;
  --warning:    #C77700;
  --warning-bg: #FFF4E0;
  --danger:     #C0392B;
  --danger-bg:  #FBEAE7;
  --info:       var(--lh-blue);
  --info-bg:    #E8F1FC;

  /* ---------- TYPE FAMILIES ----------
     Primary: Metropolis (per manual). If the .ttf isn't bundled, Montserrat
     is the official fallback called out in the manual itself (Section 02). */
  --font-display: 'Metropolis', 'Montserrat', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-sans:    'Metropolis', 'Montserrat', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE (1.250 — major third, technical clarity) ---------- */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  /* ---------- SPACING (4px base, modular grid) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- RADIUS — rounded but controlled ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---------- ELEVATION — subtle, technical, never glossy ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 26, 112, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 26, 112, 0.06), 0 1px 3px rgba(0, 26, 112, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 26, 112, 0.06), 0 1px 3px rgba(0, 26, 112, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 26, 112, 0.08), 0 4px 12px rgba(0, 26, 112, 0.05);
  --shadow-focus: 0 0 0 3px rgba(48, 127, 226, 0.30);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ============================================================
   BASE TYPOGRAPHY — semantic styles
   ============================================================ */

html { font-family: var(--font-sans); color: var(--fg); background: var(--bg); }
body { margin: 0; font-size: var(--fs-16); line-height: 1.55; -webkit-font-smoothing: antialiased; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 4vw + 1rem, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 var(--sp-6);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 2vw + 1rem, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 var(--sp-5);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 var(--sp-3);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: 1.35;
  color: var(--fg);
  margin: 0 0 var(--sp-2);
}

p, .p {
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}
.lead {
  font-size: var(--fs-20);
  line-height: 1.5;
  color: var(--fg-muted);
}

/* Eyebrow / kicker — engineering-style label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

small, .small { font-size: var(--fs-14); color: var(--fg-subtle); }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); text-decoration: underline; }

::selection { background: var(--lh-cyan); color: var(--lh-navy); }

/* Focus ring used everywhere */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-sm);
}