/* ============================================================
   variables.css · Energiephase Design Tokens
   ============================================================ */
:root{

  /* ---------- Brand Colors ----------
     Logo-only palette. Every colour is sampled from the EnergiePhase mark:
     primary green (#2A874A) for structure, a brighter green (#51A356) that the
     CALL-TO-ACTION buttons use so they stand out through contrast + glow rather
     than a foreign accent colour. No gold - full brand purity. */
  --ep-green:#2A874A;          /* logo green - primary */
  --ep-green-hi:#51A356;       /* brighter logo green - CTAs / highlights */
  --ep-green-bright:#5FBF6E;   /* extra-bright for the CTA glow edge */
  --ep-green-deep:#1E6A39;     /* deeper - gradient end / pressed */
  --ep-green-soft:#8FD3A6;     /* tint - subtle text / icons on dark */

  /* Legacy aliases kept pointing at green so any --ep-yellow* reference still
     renders on-brand instead of breaking. */
  --ep-yellow:var(--ep-green-hi);
  --ep-yellow-hi:var(--ep-green-bright);
  --ep-yellow-deep:var(--ep-green-deep);

  --ep-primary:var(--ep-green);
  --ep-primary-hi:var(--ep-green-hi);
  --ep-primary-deep:var(--ep-green-deep);
  --ep-accent:var(--ep-green-hi);

  /* ---------- Dark Blue Base ---------- */
  --ep-navy-900:#050B1A;
  --ep-navy-800:#081226;
  --ep-navy-700:#0C1B38;
  --ep-navy-600:#12264C;
  --ep-navy-500:#1B3A6B;

  /* ---------- Surfaces ----------
     Solid dark cards, not translucent frost. A frosted-glass-everywhere look
     is one of the tells of a template/AI-generated site; committing to a real
     surface colour with a crisp border reads as an intentional design choice.
     The names keep "glass" for compatibility, but the values are now solid. */
  --ep-glass:#0E1B33;               /* solid card surface on the navy base */
  --ep-glass-strong:#132340;        /* raised / hovered surface */
  --ep-glass-border:rgba(255,255,255,.09);
  --ep-glass-border-hi:rgba(81,163,86,.45);   /* green edge on hover */

  /* ---------- Text ---------- */
  --ep-text:#F4F8FF;
  --ep-text-soft:#C3D0E4;
  --ep-text-muted:#8095B0;
  --ep-text-ink:#071022;      /* text on yellow */

  /* ---------- Gradients ----------
     Background is now nearly flat: a deep navy with only a faint whisper of
     depth top-right. The big glowing radial "blobs" were the most AI-looking
     element, so they are dialled right down. */
  --ep-bg-gradient:
     radial-gradient(1100px 640px at 84% -12%, rgba(42,135,74,.10), transparent 60%),
     linear-gradient(180deg, #060D1E 0%, #081226 55%, #070F22 100%);
  --ep-green-gradient:linear-gradient(100deg, var(--ep-green-bright), var(--ep-green-hi) 50%, var(--ep-green) 100%);
  --ep-yellow-gradient:var(--ep-green-gradient);   /* legacy alias -> green */
  --ep-primary-gradient:var(--ep-green-gradient);
  --ep-cta-gradient:linear-gradient(100deg, var(--ep-green-bright), var(--ep-green-hi) 60%, var(--ep-green) 100%);
  --ep-glass-gradient:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02));

  /* ---------- Typography ---------- */
  --ep-font-display:'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ep-font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ep-fs-hero:clamp(2.8rem, 6vw, 5rem);
  --ep-fs-h2:clamp(2rem, 3.8vw, 3.1rem);
  --ep-fs-h3:clamp(1.25rem, 1.8vw, 1.6rem);
  --ep-fs-lead:clamp(1.05rem, 1.5vw, 1.3rem);
  --ep-fs-body:1rem;
  --ep-fs-small:.875rem;

  --ep-lh-tight:1.1;
  --ep-lh-snug:1.3;
  --ep-lh-body:1.65;

  --ep-tracking-tight:-.03em;
  --ep-tracking-wide:.12em;

  /* ---------- Spacing Scale ---------- */
  --ep-space-1:.25rem;
  --ep-space-2:.5rem;
  --ep-space-3:.75rem;
  --ep-space-4:1rem;
  --ep-space-5:1.5rem;
  --ep-space-6:2rem;
  --ep-space-7:3rem;
  --ep-space-8:4rem;
  --ep-space-9:6rem;
  --ep-space-10:8rem;

  --ep-section-y:clamp(4.5rem, 9vw, 8rem);

  /* ---------- Layout ---------- */
  --ep-container:1200px;
  --ep-container-wide:1360px;
  --ep-container-pad:clamp(1.25rem, 4vw, 2rem);

  /* ---------- Radius ---------- */
  --ep-radius-sm:12px;
  --ep-radius:18px;
  --ep-radius-lg:26px;
  --ep-radius-xl:34px;
  --ep-radius-pill:999px;

  /* ---------- Shadows (premium, layered) ---------- */
  --ep-shadow-sm:0 4px 14px -6px rgba(3,8,20,.5);
  --ep-shadow:0 20px 45px -22px rgba(3,8,20,.7);
  --ep-shadow-lg:0 40px 90px -40px rgba(3,8,20,.85);
  --ep-shadow-glow:0 20px 60px -18px rgba(42,135,74,.42);
  --ep-shadow-glow-accent:0 20px 55px -16px rgba(81,163,86,.55);
  --ep-shadow-inset:inset 0 1px 0 rgba(255,255,255,.10);

  /* ---------- Motion ---------- */
  --ep-ease:cubic-bezier(.22,1,.36,1);
  --ep-ease-out:cubic-bezier(.16,1,.3,1);
  --ep-dur-fast:.18s;
  --ep-dur:.35s;
  --ep-dur-slow:.6s;

  /* ---------- Z-index ---------- */
  --ep-z-nav:100;
  --ep-z-overlay:200;
  --ep-z-modal:300;

  /* ---------- Blur ---------- */
  --ep-blur:16px;
  --ep-blur-strong:26px;
}