/* ============================================================
   EDLER HUB — Colors & Type Foundation
   Load this before any other stylesheet.
   ============================================================ */

/* ------------------------------------------------------------
   BRAND WEBFONTS  ·  EH Display / Text / Script / Accent
   Files live in /fonts/. Paths are relative to this CSS file.
   ------------------------------------------------------------ */

/* EH Display — headlines */
@font-face { font-family: "EH Display"; src: url("fonts/EH_Display_ExtraLight.ttf") format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "EH Display"; src: url("fonts/EH_Display_Light.ttf")      format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "EH Display"; src: url("fonts/EH_Display_Regular.ttf")    format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EH Display"; src: url("fonts/EH_Display_Medium.ttf")     format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EH Display"; src: url("fonts/EH_Display_SemiBold.ttf")   format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "EH Display"; src: url("fonts/EH_Display_Bold.ttf")       format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "EH Display"; src: url("fonts/EH_Display_ExtraBold.ttf")  format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "EH Display"; src: url("fonts/EH_Display_Black.ttf")      format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }

/* EH Text — body, UI, captions */
@font-face { font-family: "EH Text"; src: url("fonts/EH_Text_Light.ttf")          format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "EH Text"; src: url("fonts/EH_Text_Light_Italic.ttf")   format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "EH Text"; src: url("fonts/EH_Text_Regular.ttf")        format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EH Text"; src: url("fonts/EH_Text_Italic.ttf")         format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EH Text"; src: url("fonts/EH_Text_SemiBold.ttf")       format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "EH Text"; src: url("fonts/EH_Text_SemiBold_Italic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "EH Text"; src: url("fonts/EH_Text_Bold.ttf")           format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "EH Text"; src: url("fonts/EH_Text_Bold_Italic.ttf")    format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "EH Text"; src: url("fonts/EH_Text_ExtraBold.ttf")      format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }

/* EH Script — cursive accent (echoes the logo's "l") */
@font-face { font-family: "EH Script"; src: url("fonts/EH_Script_Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EH Script"; src: url("fonts/EH_Script_Bold.otf")    format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }

/* EH Accent — special UI labels / decorative pulls */
@font-face { font-family: "EH Accent"; src: url("fonts/EH_Accent_Medium.otf")  format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* ---------- BRAND PALETTE -------------------------------- */
  --eh-navy:      #0A1628;   /* Deep Navy — primary dark, body text on light */
  --eh-yellow:    #F5B700;   /* Edler Hub Yellow — accent / highlight only */
  --eh-white:     #FFFFFF;   /* Pure white — surface */
  --eh-teal:      #00897B;   /* Secondary — links, supporting accents */

  /* ---------- NAVY SCALE ----------------------------------- */
  --eh-navy-900:  #050B16;
  --eh-navy-800:  #0A1628;   /* base */
  --eh-navy-700:  #19243A;
  --eh-navy-600:  #2C384F;
  --eh-navy-500:  #4A5468;
  --eh-navy-400:  #6E7686;
  --eh-navy-300:  #9097A4;
  --eh-navy-200:  #C3C8D1;
  --eh-navy-100:  #E2E5EA;
  --eh-navy-50:   #F3F5F8;

  /* ---------- YELLOW SCALE --------------------------------- */
  --eh-yellow-700: #B88800;
  --eh-yellow-600: #D9A300;
  --eh-yellow-500: #F5B700;  /* base */
  --eh-yellow-400: #FFC93C;
  --eh-yellow-300: #FFDA75;
  --eh-yellow-200: #FFE9A8;
  --eh-yellow-100: #FFF4D1;
  --eh-yellow-50:  #FFFAE8;

  /* ---------- TEAL SCALE ----------------------------------- */
  --eh-teal-700:  #00665B;
  --eh-teal-600:  #00786A;
  --eh-teal-500:  #00897B;  /* base */
  --eh-teal-400:  #2BA697;
  --eh-teal-300:  #62C2B5;
  --eh-teal-200:  #A2DDD4;
  --eh-teal-100:  #D5EEEA;
  --eh-teal-50:   #EBF6F4;

  /* ---------- SEMANTIC COLORS ------------------------------ */
  --eh-success:   #1F8A5B;
  --eh-warning:   #D9A300;
  --eh-danger:    #B23A2F;
  --eh-info:      #00897B;

  /* ---------- SEMANTIC TOKENS — LIGHT MODE ----------------- */
  --bg:           var(--eh-white);
  --bg-subtle:    var(--eh-navy-50);
  --bg-muted:     var(--eh-navy-100);
  --surface:      var(--eh-white);
  --surface-alt:  #FAFBFC;

  --fg:           var(--eh-navy-800);     /* primary text */
  --fg-muted:     var(--eh-navy-500);     /* secondary text */
  --fg-subtle:    var(--eh-navy-400);     /* tertiary / captions */
  --fg-disabled:  var(--eh-navy-300);
  --fg-on-dark:   var(--eh-white);
  --fg-on-yellow: var(--eh-navy-800);

  --border:        var(--eh-navy-100);
  --border-strong: var(--eh-navy-200);
  --border-focus:  var(--eh-yellow-500);

  --accent:       var(--eh-yellow-500);
  --accent-hover: var(--eh-yellow-600);
  --link:         var(--eh-teal-500);
  --link-hover:   var(--eh-teal-600);

  /* ---------- TYPE FAMILIES -------------------------------- */
  /* Display — h1/h2, hero numbers, anywhere type carries weight */
  --font-display: "EH Display", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  /* Sans / body — paragraphs, UI, captions */
  --font-sans:    "EH Text", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  /* Script — the cursive accent (logo's "l"); one word per page, max */
  --font-script:  "EH Script", "Brush Script MT", cursive;
  /* Accent — small editorial labels, callout marks */
  --font-accent:  "EH Accent", "EH Text", system-ui, sans-serif;
  /* Mono — code samples, technical IDs */
  --font-mono:    "JetBrains Mono", "Consolas", "Menlo", monospace;

  /* ---------- TYPE SCALE (modular, 1.25 ratio) ------------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   60px;
  --fs-6xl:   76px;

  /* ---------- WEIGHTS -------------------------------------- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* ---------- LINE HEIGHTS --------------------------------- */
  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  /* ---------- LETTER SPACING ------------------------------- */
  --ls-tight:    -0.02em;
  --ls-snug:     -0.01em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;     /* small-caps style labels */

  /* ---------- SPACING (4px base) --------------------------- */
  --sp-0:    0;
  --sp-1:    4px;
  --sp-2:    8px;
  --sp-3:    12px;
  --sp-4:    16px;
  --sp-5:    20px;
  --sp-6:    24px;
  --sp-7:    32px;
  --sp-8:    40px;
  --sp-9:    48px;
  --sp-10:   64px;
  --sp-11:   80px;
  --sp-12:   96px;
  --sp-13:   128px;

  /* ---------- RADII ---------------------------------------- */
  --r-xs:    4px;
  --r-sm:    6px;
  --r-md:    10px;
  --r-lg:    14px;
  --r-xl:    20px;
  --r-2xl:   28px;
  --r-pill:  999px;

  /* ---------- SHADOWS (subtle, layered — no harsh drops) --- */
  --shadow-xs: 0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.04), 0 2px 6px rgba(10, 22, 40, 0.05);
  --shadow-md: 0 2px 4px rgba(10, 22, 40, 0.05), 0 8px 20px rgba(10, 22, 40, 0.06);
  --shadow-lg: 0 6px 12px rgba(10, 22, 40, 0.06), 0 18px 40px rgba(10, 22, 40, 0.08);
  --shadow-xl: 0 12px 24px rgba(10, 22, 40, 0.08), 0 32px 60px rgba(10, 22, 40, 0.12);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-yellow: 0 8px 24px rgba(245, 183, 0, 0.25);

  /* ---------- TRANSITIONS ---------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast:     120ms;
  --t-base:     200ms;
  --t-slow:     320ms;

  /* ---------- LAYOUT --------------------------------------- */
  --container-sm:   640px;
  --container-md:   864px;
  --container-lg:   1080px;
  --container-xl:   1280px;
  --container-2xl:  1440px;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1, .display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  margin: 0 0 var(--sp-5) 0;
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-4) 0;
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-3) 0;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-3) 0;
}

h5, .h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0 0 var(--sp-2) 0;
}

h6, .h6, .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--sp-2) 0;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  margin: 0 0 var(--sp-4) 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.small, small { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-muted); }
.caption { font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--fg-subtle); }

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-subtle);
  padding: 2px 6px;
  border-radius: var(--r-xs);
  color: var(--eh-navy-700);
}
pre code { background: transparent; padding: 0; }

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); border-bottom-color: currentColor; }

strong, b { font-weight: var(--fw-bold); }
em, i    { font-style: italic; }

::selection { background: var(--eh-yellow-300); color: var(--eh-navy-900); }

/* Script accent — reflects the cursive "l" in the wordmark.
   One word per page, max. */
.script-accent {
  font-family: var(--font-script);
  font-weight: 700;
  font-style: normal;
}