/* ══════════════════════════════════════════════════════════════
   ELUNOR — BASE TOKENS  (loaded before style.css on every page)
   Source of truth for brand colours + fonts.
   Based on homepage + services hero design.
   ══════════════════════════════════════════════════════════════ */

/* ── Gilroy (self-hosted) ──────────────────────────────────────
   Upload licensed files to assets/fonts/. If they're missing,
   the stack falls back to Plus Jakarta Sans (Google) — never to Arial. */
@font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-Regular.woff2')   format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-Medium.woff2')    format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-SemiBold.woff2')  format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-Bold.woff2')      format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* ── FONTS ───────────────────────────────────────────────── */
  --font-primary: 'Gilroy', 'Plus Jakarta Sans', system-ui, sans-serif;  /* all headings + body */
  --font-display: 'Bebas Neue', 'Gilroy', sans-serif;                     /* giant hero words: SOLAR ENERGY, CLEAN ENERGY */

  /* ── BRAND GREENS (dark → light) ─────────────────────────── */
  --green-950: #060d06;   /* footer background */
  --green-900: #0c2d18;   /* deepest text / strong emphasis */
  --green-850: #0b2416;   /* dark section bg (CTA, projects slider, env impact) */
  --green-800: #0B6340;   /* PRIMARY heading colour (homepage + services hero) */
  --green-750: #1a5c38;   /* section-title accent word ("Serve", "Impact", "Resource…") */
  --green-700: #1e5c36;   /* radial-gradient glow on dark sections */
  --green-600: #255F4E;   /* body/description text on light bg */
  --green-500: #2e7d32;   /* UI accents, hover borders */
  --green-400: #4a8c1c;   /* small accent text, tag text */

  /* ── LIME (brand highlight) ─────────────────────────────── */
  --lime-500: #9ed01e;    /* PRIMARY lime — highlights, hero button */
  --lime-400: #c8f135;    /* CTA buttons, featured cards */
  --lime-300: #CEFD3E;    /* nav "Contact Us" / submit button */
  --lime-200: #b8f04a;    /* lime text on dark backgrounds */
  --lime-dot: #7ec62a;    /* tag-pill dots */
  --lime-border: #b8d970; /* tag-pill borders */
  --lime-600:  #78c800;   /* deeper lime — gradient start, small accents */
  --lime-hover:#d4ff4a;   /* hover state for lime buttons */
  --lime-soft: #BDD592;   /* soft lime ("Sustainably" on home hero) */

  /* Gradient used for highlighted heading words */
  --grad-lime: linear-gradient(105deg, #78c800 0%, #9ed01e 100%);
  /* Dark section background */
  --grad-dark: radial-gradient(ellipse at 65% 35%, #1e5c36 0%, #0b2416 60%);

  /* ── NEUTRALS / SURFACES ─────────────────────────────────── */
  --bg-mint:     #eef6e3; /* page hero / light section background */
  --bg-white:    #ffffff;
  --bg-mint-2:   #f2f8ea; /* lighter mint tint */
  --surface:     #f4f4f4; /* light grey cards */
  --border-soft: #b8ccb0; /* back-pill border, soft dividers */
  --border-light:#e8ede4; /* hairline dividers on white/mint */

  --text-900: #1a1a1a;    /* default dark text / headings */
  --text-800: #262626;    /* body default */
  --text-700: #444444;    /* list / card body text */
  --text-600: #555555;    /* secondary text */
  --text-500: #666666;    /* tertiary text */
  --text-400: #888888;    /* muted text, rules */
  --text-sage:#5a6555;    /* muted green-grey body text (about page) */

  /* ── TYPE SCALE ──────────────────────────────────────────── */
  --fs-hero:    clamp(2.4rem, 4.4vw, 4.6rem);   /* page hero h1 */
  --fs-section: clamp(2rem, 3.8vw, 3.4rem);     /* section h2 */
  --fs-card:    clamp(1.1rem, 1.6vw, 1.4rem);   /* card titles */
  --fs-lead:    clamp(1.1rem, 2.1vw, 2rem);     /* hero description */
  --fs-body:    clamp(0.92rem, 1.1vw, 1.05rem);
  --fs-small:   0.82rem;

  /* ── RADII ───────────────────────────────────────────────── */
  --r-pill: 999px;
  --r-card: 22px;
  --r-lg:   28px;
}

/* ── Global font defaults ─────────────────────────────────── */
html, body, button, input, textarea, select {
  font-family: var(--font-primary);
}
body { color: var(--text-800); }

/* Reusable highlight class (lime gradient text) */
.text-grad-lime {
  background: var(--grad-lime);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}