/* =========================================================
   E-HENG Design System — Colors & Type
   China-compliant: no Google Fonts, no external social CDN.
   Fonts are sourced from locally-available system stacks and
   from jsDelivr (which mirrors most assets inside China).
   ========================================================= */

:root {
  /* ---------- BRAND CORE ---------- */
  --eh-navy:        #110C4E;   /* Primary — logo navy */
  --eh-navy-700:    #1A1568;   /* Hover / lighter */
  --eh-navy-900:    #0A0735;   /* Pressed / darker */
  --eh-red:         #E6212A;   /* Accent — logo red */
  --eh-red-700:     #C41820;
  --eh-red-900:     #8F1016;

  /* ---------- NEUTRALS ---------- */
  --eh-bg:          #FFFFFF;
  --eh-bg-soft:     #F5F6FA;   /* Subtle surface tint (cool off-white) */
  --eh-bg-muted:    #EEF0F6;   /* Section alt */
  --eh-border:      #E1E4EE;
  --eh-border-soft: #EEF0F6;
  --eh-fg:          #0E1120;   /* Body text */
  --eh-fg-1:        #0E1120;   /* Headings */
  --eh-fg-2:        #3A4056;   /* Secondary text */
  --eh-fg-3:        #6B7390;   /* Tertiary / meta */
  --eh-fg-inverse:  #FFFFFF;

  /* ---------- SEMANTIC ---------- */
  --eh-primary:     var(--eh-navy);
  --eh-primary-hover: var(--eh-navy-700);
  --eh-primary-pressed: var(--eh-navy-900);
  --eh-accent:      var(--eh-red);
  --eh-link:        var(--eh-navy);
  --eh-link-hover:  var(--eh-red);
  --eh-success:     #1F8A4C;
  --eh-warning:     #D9831F;
  --eh-danger:      var(--eh-red);

  /* ---------- SPACING ---------- */
  --eh-s-1: 4px;
  --eh-s-2: 8px;
  --eh-s-3: 12px;
  --eh-s-4: 16px;
  --eh-s-5: 24px;
  --eh-s-6: 32px;
  --eh-s-7: 48px;
  --eh-s-8: 64px;
  --eh-s-9: 96px;
  --eh-s-10: 128px;

  /* ---------- RADII ---------- */
  --eh-r-sm: 2px;
  --eh-r-md: 4px;
  --eh-r-lg: 8px;
  --eh-r-xl: 12px;
  --eh-r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --eh-shadow-1: 0 1px 2px rgba(17, 12, 78, .06), 0 1px 1px rgba(17, 12, 78, .04);
  --eh-shadow-2: 0 4px 12px rgba(17, 12, 78, .08), 0 2px 4px rgba(17, 12, 78, .04);
  --eh-shadow-3: 0 12px 28px rgba(17, 12, 78, .12), 0 4px 10px rgba(17, 12, 78, .06);
  --eh-shadow-inset: inset 0 0 0 1px var(--eh-border);

  /* ---------- TYPE STACKS ----------
     Prefer system Chinese fonts first so pages render fast in China
     without loading any external webfont. PingFang SC ships on Apple;
     Microsoft YaHei / Noto Sans SC on Windows / Linux.
  */
  --eh-sans:
    "Inter", "HarmonyOS Sans SC",
    "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
    "Noto Sans SC", "Source Han Sans SC",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --eh-display:
    "Barlow Condensed", "Oswald",
    "PingFang SC", "Microsoft YaHei",
    "Noto Sans SC", sans-serif;

  --eh-mono:
    "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono",
    "Microsoft YaHei Mono", monospace;

  /* ---------- TYPE SCALE (desktop) ---------- */
  --eh-t-display: clamp(44px, 5.2vw, 72px);  /* Hero */
  --eh-t-h1:      clamp(34px, 3.6vw, 48px);
  --eh-t-h2:      clamp(26px, 2.6vw, 34px);
  --eh-t-h3:      20px;
  --eh-t-h4:      17px;
  --eh-t-body:    16px;
  --eh-t-small:   14px;
  --eh-t-caption: 12px;
  --eh-t-eyebrow: 12px;   /* Uppercase label above headings */

  --eh-lh-tight:  1.08;
  --eh-lh-snug:   1.25;
  --eh-lh-body:   1.6;
  --eh-lh-loose:  1.75;

  --eh-tracking-eyebrow: 0.18em;
  --eh-tracking-caps:    0.08em;

  /* ---------- LAYOUT ---------- */
  --eh-container: 1240px;
  --eh-gutter: 24px;
  --eh-header-h: 84px;

  /* ---------- MOTION ---------- */
  --eh-ease: cubic-bezier(.2,.7,.2,1);
  --eh-dur-fast: 120ms;
  --eh-dur-med:  220ms;
  --eh-dur-slow: 360ms;
}

/* =========================================================
   LOCAL FONT LOADS (jsDelivr / fonts.bunny.net mirrors work
   from mainland China; no Google Fonts).
   Swap for self-hosted .woff2 in production for full offline.
   ========================================================= */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("https://jsd.cdn.zzko.cn/npm/@fontsource-variable/inter@5.0.18/files/inter-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://jsd.cdn.zzko.cn/npm/@fontsource/barlow-condensed@5.0.13/files/barlow-condensed-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://jsd.cdn.zzko.cn/npm/@fontsource/barlow-condensed@5.0.13/files/barlow-condensed-latin-700-normal.woff2") format("woff2");
}

/* =========================================================
   SEMANTIC TYPE CLASSES (use via class= on elements)
   ========================================================= */
.eh-display {
  font-family: var(--eh-display);
  font-weight: 700;
  font-size: var(--eh-t-display);
  line-height: var(--eh-lh-tight);
  letter-spacing: -0.01em;
  color: var(--eh-fg-1);
  text-wrap: balance;
}
.eh-h1 {
  font-family: var(--eh-display);
  font-weight: 700;
  font-size: var(--eh-t-h1);
  line-height: var(--eh-lh-tight);
  letter-spacing: -0.01em;
  color: var(--eh-fg-1);
  text-wrap: balance;
}
.eh-h2 {
  font-family: var(--eh-display);
  font-weight: 700;
  font-size: var(--eh-t-h2);
  line-height: var(--eh-lh-snug);
  color: var(--eh-fg-1);
  text-wrap: balance;
}
.eh-h3 {
  font-family: var(--eh-sans);
  font-weight: 700;
  font-size: var(--eh-t-h3);
  line-height: var(--eh-lh-snug);
  color: var(--eh-fg-1);
}
.eh-h4 {
  font-family: var(--eh-sans);
  font-weight: 600;
  font-size: var(--eh-t-h4);
  line-height: var(--eh-lh-snug);
  color: var(--eh-fg-1);
}
.eh-body {
  font-family: var(--eh-sans);
  font-size: var(--eh-t-body);
  line-height: var(--eh-lh-body);
  color: var(--eh-fg-2);
  text-wrap: pretty;
}
.eh-small {
  font-family: var(--eh-sans);
  font-size: var(--eh-t-small);
  line-height: var(--eh-lh-body);
  color: var(--eh-fg-2);
}
.eh-caption {
  font-family: var(--eh-sans);
  font-size: var(--eh-t-caption);
  line-height: 1.5;
  color: var(--eh-fg-3);
}
.eh-eyebrow {
  font-family: var(--eh-sans);
  font-size: var(--eh-t-eyebrow);
  font-weight: 700;
  letter-spacing: var(--eh-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--eh-red);
}
.eh-mono {
  font-family: var(--eh-mono);
  font-size: 13px;
}

/* =========================================================
   GLOBAL ELEMENT DEFAULTS (opt-in via .eh-root on <body>)
   ========================================================= */
.eh-root {
  font-family: var(--eh-sans);
  font-size: var(--eh-t-body);
  line-height: var(--eh-lh-body);
  color: var(--eh-fg);
  background: var(--eh-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.eh-root h1 { @extend .eh-h1; }
.eh-root a  { color: var(--eh-link); text-decoration: none; transition: color var(--eh-dur-fast) var(--eh-ease); }
.eh-root a:hover { color: var(--eh-link-hover); }