/* ============================================================================
   THEME  — the BRANDING layer.  This is the ONE file the lane rewrites to
   re-skin the whole site.  Every color/font/spacing value the components use
   is a token here.  Change these, and the entire template re-themes.
   (The lane traverses the copied template and rewrites these tokens + the
    SITE config in build.py to match the project's brand — see website_seo.md.)
   ============================================================================ */
:root{
  /* --- brand palette (MAKS Green Energy — green-forward per MGE-20 reference) --- */
  --brand:            #00A86B;   /* Renewable Green — PRIMARY (buttons, links, accents) */
  --brand-2:          #006B52;   /* Forest Green — primary dark / hover */
  --brand-blue:       #1154E8;   /* MAKS Blue — retained for data-viz (capacity) only */
  --accent:           #1E8E4E;   /* deep green — headline accent */
  --accent-2:         #F4B400;   /* Solar Gold — accent only (gradients) */

  /* --- green-energy extended tokens (brand) --- */
  --green:            #00A86B;   /* Renewable Green */
  --green-dark:       #006B52;   /* Forest Green */
  --gold:             #F4B400;   /* Solar Gold */
  --navy:             #132238;   /* Dark Navy — reports / dark surfaces */

  /* --- neutrals --- */
  --ink:              #132238;   /* Dark Navy — body text */
  --muted:            #65758B;   /* Slate — secondary text */
  --bg:               #ffffff;   /* page background */
  --surface:          #F6F8FA;   /* Mist — cards / alt sections */
  --line:             #DCE3EA;   /* Steel — borders / rules */
  --on-brand:         #ffffff;   /* text on brand/accent fills */

  /* --- typography (Manrope headlines · Inter body · IBM Plex Sans numbers) --- */
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head:  "Manrope", var(--font-sans);       /* display/headings */
  --font-num:   "IBM Plex Sans", var(--font-sans); /* financial tables / impact counters */
  --font-css:   "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&family=IBM+Plex+Sans:wght@500;600;700&display=swap";

  /* --- data-viz palette (brand rule: green=generation · blue=capacity · gold=revenue · slate=forecast) --- */
  --viz-generation:   #00A86B;
  --viz-capacity:     #1154E8;
  --viz-revenue:      #F4B400;
  --viz-forecast:     #65758B;

  /* --- scale / shape (brand: radius 12/16/22 · 8pt grid · 1280 container) --- */
  --radius:     16px;
  --radius-sm:  12px;
  --radius-lg:  22px;
  --shell:      1280px;                 /* max content width (brand --container) */
  --gap:        clamp(1rem, 3vw, 2rem);
  --shadow:     0 12px 40px rgba(0, 0, 0, .08);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, .06);
  --theme-color:#00A86B;                /* <meta name=theme-color> — match --brand */
}

/* ONE consistent LIGHT/WHITE theme on every page (MGE-20): the site is
   deliberately white-background throughout and does NOT flip to a dark theme —
   not on OS dark-mode, not via a data-theme toggle. This keeps the whole site
   looking like the approved reference (white hero, white sections, green accents)
   instead of "some white, some dark". If a theme toggle sets either data-theme,
   the palette stays the light one below. */
:root[data-theme="dark"],
:root[data-theme="light"]{
  --ink:#132238; --muted:#65758B; --bg:#ffffff; --surface:#F5FAF7;
  --line:#DCE3EA; --brand:#00A86B; --brand-2:#006B52;
}