/* ENERGROUP design tokens — sourced from Figma (fileKey lYniuy75yndJuzzzKTO884) + brand bible PDF */

/* Self-hosted brand fonts */
@font-face {
  font-family: 'Coolvetica';
  src: url('../assets/fonts/Coolvetica-Rg.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Coolvetica';
  src: url('../assets/fonts/Coolvetica-Rg-It.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Coolvetica Cond';
  src: url('../assets/fonts/Coolvetica-Rg-Cond.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Eurostile';
  src: url('../assets/fonts/eurostile.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colours (Figma-confirmed, matches PDF palette) */
  --amber: #fdb518;
  --amber-dark: #d99a0c;       /* derived hover */
  --purple: #8650a0;           /* enercore accent */
  --blue: #4670b7;             /* enertrust accent */
  --dark: #1e1e1e;             /* primary dark bg */
  --black: #000000;
  --white: #ffffff;
  --light: #efeded;            /* light section bg / icon fill */
  --light-alt: #f4f4f4;        /* alt light surface */
  --card-dark: #2a2a2a;        /* derived dark card */
  --text-muted-dark: #b5b5b5;  /* muted text on dark */
  --text-muted-light: #6b6b6b; /* muted text on light */
  --border: rgba(255,255,255,0.12);

  /* Fonts */
  --font-display: 'Coolvetica', 'Saira', system-ui, sans-serif;
  --font-display-cond: 'Coolvetica Cond', 'Coolvetica', sans-serif;
  --font-body: 'Eurostile', 'Saira', 'Rajdhani', system-ui, sans-serif;

  /* Type scale (px from Figma: 17,20,24,30,34,40,51,64,91,94) */
  --fs-hero: 94px;
  --fs-h1: 64px;
  --fs-h2: 51px;
  --fs-h3: 34px;
  --fs-h4: 24px;
  --fs-body-lg: 20px;
  --fs-body: 17px;
  --fs-label: 30px;
  --fs-step-num: 40px;

  /* Spacing (8px base) */
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 40px;
  --sp-xl: 64px;
  --sp-2xl: 96px;

  /* Layout */
  --container: 1280px;
  --gutter: 80px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 60px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 200ms;
}

@media (max-width: 1023px) {
  :root {
    --fs-hero: 48px;
    --fs-h1: 40px;
    --fs-h2: 34px;
    --fs-h3: 26px;
    --fs-label: 24px;
    --gutter: 20px;
    --sp-2xl: 56px;
  }
}