/* ==============================================================
   Hydro Wind Energy — Design Tokens
   Source of truth for color, type, spacing, radius, shadow.
   Import into any HTML/prototype:
     <link rel="stylesheet" href="/colors_and_type.css" />
   ============================================================== */

/* ---------- Webfonts ------------------------------------------ */
/* Brand fonts shipped locally. Mosk is the primary display face
   (supplied as Light 300 + Bold 700 brand files). WeChat Sans Std
   Medium handles secondary display + UI. STIX Two Text covers
   editorial/serif moments and Academy Engraved is the ceremonial
   accent face. */

/* --- Mosk (display) --- */
@font-face {
  font-family: "Mosk";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("FontsFree-Net-Mosk-Light-300.ttf") format("truetype");
}
@font-face {
  font-family: "Mosk";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("FontsFree-Net-Mosk-Bold-700.ttf") format("truetype");
}

/* --- WeChat Sans Std (UI / body) --- */
@font-face {
  font-family: "WeChat Sans Std";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("WeChatSansStd-Medium.4bc4445d.ttf") format("truetype");
}

/* --- STIX Two Text (editorial serif) --- */
@font-face {
  font-family: "STIX Two Text";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("STIXTwoText.ttf") format("truetype");
}
@font-face {
  font-family: "STIX Two Text";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("STIXTwoText-Italic.ttf") format("truetype");
}

/* --- Academy Engraved LET (ceremonial accent) --- */
@font-face {
  font-family: "Academy Engraved LET";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("Academy_Engraved_LET_Fonts.ttf") format("truetype");
}

/* ---------- Tokens -------------------------------------------- */
:root {
  /* ── Brand colors ─────────────────────────────────────────── */
  --color-primary:         #4460EF;  /* the signature indigo-blue */
  --color-primary-hover:   #2C44BD;  /* gradient dark / hover */
  --color-primary-press:   #1138FF;  /* pressed / very saturated */
  --color-primary-soft:    #8A9DFF;  /* muted lavender text on dark */
  --color-primary-tint:    #E8ECFE;  /* 8% primary on white */

  --color-navy:            #0D2143;  /* hero/title slide background */
  --color-navy-deep:       #082969;  /* overlay wash on imagery */
  --color-navy-ink:        #1C3353;  /* chart / body on warm sections */

  --color-cyan:            #1DD6FF;  /* rare water accent */
  --color-sky:             #C8E4F6;  /* soft gradient bottom */

  /* ── Supporting palette (charts, co-brand) ────────────────── */
  --color-teal:            #318C7B;
  --color-teal-soft:       #82BFD3;
  --color-gold:            #D48B22;
  --color-lime:            #9FBC1C;

  /* ── Neutrals ─────────────────────────────────────────────── */
  --color-ink:             #1D1D1B;  /* body on light */
  --color-ink-2:           #2C2C2C;  /* softer body */
  --color-muted:           #383636;  /* captions */
  --color-line:            #EAEAEA;  /* dividers on light */
  --color-line-strong:     #DADADA;
  --color-surface:         #FFFFFF;
  --color-surface-2:       #F9F8F8;  /* page bg */
  --color-surface-3:       #F1F1F1;  /* section bg */
  --color-surface-dark:    #0D2143;  /* dark surface === navy */
  --color-surface-dark-2:  rgba(255, 255, 255, 0.07);
  --color-surface-dark-3:  rgba(255, 255, 255, 0.12);
  --color-line-dark:       rgba(255, 255, 255, 0.14);

  /* ── Semantic foreground / background ─────────────────────── */
  --fg-1:    var(--color-ink);       /* primary body */
  --fg-2:    var(--color-muted);     /* secondary body */
  --fg-3:    #6B7280;                /* tertiary / labels */
  --fg-brand: var(--color-primary);
  --fg-on-dark-1: #FFFFFF;
  --fg-on-dark-2: rgba(255, 255, 255, 0.72);
  --fg-on-dark-3: rgba(255, 255, 255, 0.5);

  --bg-1:    var(--color-surface);
  --bg-2:    var(--color-surface-2);
  --bg-3:    var(--color-surface-3);
  --bg-dark: var(--color-surface-dark);

  /* ── Type ─────────────────────────────────────────────────── */
  --font-display:    "Mosk", "WeChat Sans Std", system-ui, sans-serif;
  --font-ui:         "WeChat Sans Std", "Mosk", system-ui, sans-serif;
  --font-body:       "WeChat Sans Std", "Mosk", system-ui, sans-serif;
  --font-editorial:  "STIX Two Text", Georgia, serif;
  --font-engraved:   "Academy Engraved LET", "STIX Two Text", serif;
  --font-mono:       "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Scale — deck-native, big. */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  44px;  /* subhead */
  --text-4xl:  56px;  /* slide H2 */
  --text-5xl:  72px;  /* slide H1 */
  --text-6xl:  96px;  /* hero */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.45;
  --leading-loose:   1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-loose:  0.04em;

  /* ── Spacing (8-pt grid) ──────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── Radius ───────────────────────────────────────────────── */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 9999px;

  /* ── Shadow / elevation ───────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 24px rgba(0,0,0,0.08);
  --shadow-lg:  0 4px 80px rgba(0,0,0,0.09);   /* the canonical icon-tile glow */
  --shadow-hard: 0 4px 4px rgba(0,0,0,0.25);    /* stacked-paper */
  --shadow-focus: 0 0 0 3px rgba(68,96,239,0.35);

  /* ── Motion ───────────────────────────────────────────────── */
  --motion-fast:   120ms;
  --motion-normal: 200ms;
  --motion-slow:   360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emph:     cubic-bezier(0.3, 0, 0, 1);

  /* ── Gradients ────────────────────────────────────────────── */
  --gradient-primary: linear-gradient(135deg, #4460EF 0%, #2C44BD 100%);
  --gradient-navy:    linear-gradient(180deg, #0D2143 0%, #082969 100%);
  --gradient-sky:     linear-gradient(180deg, #C8E4F6 0%, #FFFFFF 100%);
}

/* ---------- Semantic element styles --------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--fg-brand);
}

.caption, small {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

a {
  color: var(--fg-brand);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-fast) var(--ease-standard);
}
a:hover { border-color: currentColor; }

/* ---------- Utility primitives (opt-in) ----------------------- */
.hwe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--text-md);
  color: #fff;
  background: var(--color-primary);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}
.hwe-btn:hover  { background: var(--color-primary-hover); }
.hwe-btn:active { transform: scale(0.98); }
.hwe-btn--pill  { border-radius: var(--radius-pill); padding: 14px 32px; }
.hwe-btn--ghost { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); }
.hwe-btn--ghost:hover { background: var(--color-primary); color: #fff; }

.hwe-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}
.hwe-card--dark {
  background: var(--color-surface-dark-2);
  color: var(--fg-on-dark-1);
}

.hwe-eyebrow-rule {
  display: inline-block;
  width: 48px;
  height: 4px;
  background: var(--color-primary);
  border-radius: 2px;
  margin-bottom: var(--space-4);
}