/* ==========================================================================
   Enlighten Pro — Colors & Type Foundations  (v2 — post-website audit)
   ==========================================================================
   "From Darkness into Light."  ·  "Lighting Spaces, Enriching Lives."
   Since 2014 · Mumbai · 37,000 sq ft manufacturing · architectural LED

   Philosophy
   ----------
   A confident black-on-white stage, with strategic colour used like a
   lighting cue: never decorative, always meaningful.
   - Mono is the theatre.
   - LUMEN (warm 2700 K amber) is the house light — CTAs, "on" states,
     hero beams, product highlight. The single brand-moment colour.
   - SIGNAL (cool 6500 K blue) is the spotlight — info, data, selection,
     links. The second, quieter, data-facing colour.
   - SPECTRUM (optional) — six temperature-coded swatches (2200→6500 K)
     for product badging and collateral accents on catalog surfaces only.
   ========================================================================== */

/* ---------- FONTS ---------- */
/* Brand type system:
   • Display  — Montserrat Medium (Google Fonts ONLY — never a local TTF;
     the original Montserrat-Medium.ttf renders capital E as "Ɛ").
     Hero, H1, H2, product names.  Pages load it via the Google Fonts
     <link> shown in HANDOFF.md.
   • Sans/UI — IBM Plex Sans (Google Fonts). H3/H4, body, nav, buttons, forms.
   • Mono    — JetBrains Mono.  SKUs, lumens, watts, measurements.
   Rule of thumb: ≥ 24px = Montserrat, < 24px = Plex. Never serif. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- COLOR: CORE MONO RAMP (neutral-cool) ---------- */
  --ep-black:          #0A0B0D;
  --ep-ink:            #15171A;
  --ep-graphite:       #2A2D33;
  --ep-steel:          #4A4F57;
  --ep-slate:          #6B7079;
  --ep-mist:           #A3A8B0;
  --ep-fog:            #D4D7DC;
  --ep-haze:           #E8EAED;
  --ep-paper:          #F4F5F7;
  --ep-white:          #FFFFFF;

  /* ---------- COLOR: LUMEN (warm 2700 K) — primary brand accent ---------- */
  --ep-lumen-50:       #FFF7E6;
  --ep-lumen-100:      #FFEBB8;
  --ep-lumen-300:      #FFD166;
  --ep-lumen-500:      #F5A524;
  --ep-lumen-600:      #D98A0B;
  --ep-lumen-700:      #A66807;

  /* ---------- COLOR: SIGNAL (cool 6500 K) — data/info ---------- */
  --ep-signal-50:      #E6F0FA;
  --ep-signal-100:     #C2DBF2;
  --ep-signal-300:     #6FA8DC;
  --ep-signal-500:     #1E6FBA;
  --ep-signal-600:     #155999;
  --ep-signal-700:     #0F4272;

  /* ---------- COLOR: SPECTRUM — CCT-coded accents (catalog only) ----------
     Used on product badges to indicate available colour temperature.
     Strictly illustrative — do NOT use for UI states. */
  --ep-cct-2200:       #FFB76B;   /* candlelight */
  --ep-cct-2700:       #FFCB8E;   /* warm white */
  --ep-cct-3000:       #FFD9A8;   /* soft white */
  --ep-cct-4000:       #F4F0E0;   /* neutral */
  --ep-cct-5000:       #E8EEF5;   /* cool daylight */
  --ep-cct-6500:       #DCE6F2;   /* cool white */

  /* ---------- COLOR: SEMANTIC ---------- */
  --ep-success:        #1F8A4C;
  --ep-success-bg:     #E4F3EA;
  --ep-warning:        #D98A0B;
  --ep-warning-bg:     #FFF2D4;
  --ep-danger:         #C0392B;
  --ep-danger-bg:      #F8E2DF;
  --ep-info:           var(--ep-signal-500);
  --ep-info-bg:        var(--ep-signal-50);

  /* ---------- SEMANTIC ALIASES ---------- */
  --ep-fg-1: var(--ep-ink);
  --ep-fg-2: var(--ep-steel);
  --ep-fg-3: var(--ep-slate);
  --ep-fg-4: var(--ep-mist);
  --ep-fg-inverse: var(--ep-white);
  --ep-bg-1: var(--ep-white);
  --ep-bg-2: var(--ep-paper);
  --ep-bg-3: var(--ep-haze);
  --ep-bg-inverse: var(--ep-black);
  --ep-border-1: var(--ep-haze);
  --ep-border-2: var(--ep-fog);
  --ep-border-3: var(--ep-steel);
  --ep-accent: var(--ep-lumen-500);
  --ep-accent-hover: var(--ep-lumen-600);
  --ep-accent-fg: var(--ep-black);

  /* ---------- TYPE ---------- */
  --ep-font-display: 'Montserrat', 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ep-font-sans:    'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ep-font-ui:      'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ep-font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  --ep-text-2xs: 10px;  --ep-text-xs: 12px;  --ep-text-sm: 13px;
  --ep-text-base: 15px; --ep-text-md: 17px;  --ep-text-lg: 20px;
  --ep-text-xl: 24px;   --ep-text-2xl: 32px; --ep-text-3xl: 40px;
  --ep-text-4xl: 56px;  --ep-text-5xl: 72px; --ep-text-6xl: 96px;

  --ep-leading-tight: 1.05;  --ep-leading-snug: 1.2;
  --ep-leading-normal: 1.5;  --ep-leading-loose: 1.7;

  --ep-weight-regular: 400;  --ep-weight-medium: 500;
  --ep-weight-semi: 600;     --ep-weight-bold: 700;  --ep-weight-black: 900;

  --ep-track-tight: -0.02em;  --ep-track-normal: 0;
  --ep-track-wide: 0.04em;    --ep-track-wider: 0.12em;  --ep-track-widest: 0.22em;

  /* ---------- SPACING (4px base) ---------- */
  --ep-sp-0: 0; --ep-sp-1: 4px; --ep-sp-2: 8px; --ep-sp-3: 12px;
  --ep-sp-4: 16px; --ep-sp-5: 20px; --ep-sp-6: 24px; --ep-sp-8: 32px;
  --ep-sp-10: 40px; --ep-sp-12: 48px; --ep-sp-16: 64px; --ep-sp-20: 80px;
  --ep-sp-24: 96px; --ep-sp-32: 128px;

  /* ---------- RADII ---------- */
  --ep-radius-0: 0; --ep-radius-sm: 2px; --ep-radius-md: 4px;
  --ep-radius-lg: 6px; --ep-radius-pill: 999px;

  /* ---------- SHADOWS + GLOWS ---------- */
  --ep-shadow-1: 0 1px 2px rgba(10,11,13,.06), 0 0 0 1px rgba(10,11,13,.04);
  --ep-shadow-2: 0 2px 6px rgba(10,11,13,.08), 0 0 0 1px rgba(10,11,13,.05);
  --ep-shadow-3: 0 8px 24px rgba(10,11,13,.10), 0 0 0 1px rgba(10,11,13,.05);
  --ep-shadow-4: 0 16px 48px rgba(10,11,13,.14);
  --ep-glow-lumen:  0 0 24px rgba(245,165,36,.45), 0 0 48px rgba(245,165,36,.22);
  --ep-glow-signal: 0 0 24px rgba(30,111,186,.35);

  /* ---------- MOTION ---------- */
  --ep-ease-out: cubic-bezier(.2,.7,.2,1);
  --ep-ease-in-out: cubic-bezier(.65,0,.35,1);
  --ep-dur-fast: 120ms; --ep-dur-base: 200ms; --ep-dur-slow: 360ms;
}

html, body {
  font-family: var(--ep-font-sans);
  color: var(--ep-fg-1);
  background: var(--ep-bg-1);
  font-size: var(--ep-text-base);
  line-height: var(--ep-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display */
.ep-display-1, h1.ep-hero {
  font-family: var(--ep-font-display);
  font-weight: 500; /* Montserrat only ships Medium here */
  font-size: clamp(40px, 6vw, var(--ep-text-6xl));
  line-height: var(--ep-leading-tight);
  letter-spacing: var(--ep-track-tight);
}
.ep-display-2 {
  font-family: var(--ep-font-display);
  font-weight: 500;
  font-size: var(--ep-text-4xl);
  line-height: var(--ep-leading-tight);
  letter-spacing: var(--ep-track-tight);
}

/* Headings — Montserrat for large (≥ 24px), Plex for small */
h1, .ep-h1 { font: 500 var(--ep-text-3xl)/var(--ep-leading-snug) var(--ep-font-display); letter-spacing: var(--ep-track-tight); color: var(--ep-fg-1); margin: 0; }
h2, .ep-h2 { font: 500 var(--ep-text-2xl)/var(--ep-leading-snug) var(--ep-font-display); letter-spacing: var(--ep-track-tight); color: var(--ep-fg-1); margin: 0; }
h3, .ep-h3 { font: 600 var(--ep-text-xl)/var(--ep-leading-snug) var(--ep-font-sans); color: var(--ep-fg-1); margin: 0; }
h4, .ep-h4 { font: 600 var(--ep-text-md)/var(--ep-leading-snug) var(--ep-font-sans); color: var(--ep-fg-1); margin: 0; }

/* Eyebrow */
.ep-eyebrow {
  font: 500 var(--ep-text-xs)/1 var(--ep-font-mono);
  letter-spacing: var(--ep-track-widest);
  text-transform: uppercase;
  color: var(--ep-fg-3);
}
.ep-eyebrow--accent { color: var(--ep-accent); }

/* Body — IBM Plex Sans 400 for long-form, 500 for UI */
p, .ep-body { font: 400 var(--ep-text-base)/var(--ep-leading-normal) var(--ep-font-sans); color: var(--ep-fg-1); margin: 0; }
.ep-body-lg { font-size: var(--ep-text-md); line-height: var(--ep-leading-normal); }
.ep-body-sm { font-size: var(--ep-text-sm); color: var(--ep-fg-2); }
.ep-caption { font-size: var(--ep-text-xs); color: var(--ep-fg-3); }

/* Mono / values */
code, .ep-mono, .ep-value {
  font-family: var(--ep-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.ep-value    { font-weight: 500; font-size: var(--ep-text-base); color: var(--ep-fg-1); }
.ep-value-lg { font-family: var(--ep-font-mono); font-weight: 600; font-size: var(--ep-text-2xl); line-height: 1; font-variant-numeric: tabular-nums; color: var(--ep-fg-1); }

/* Links */
a, .ep-link {
  color: var(--ep-signal-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ep-dur-fast) var(--ep-ease-out),
              color var(--ep-dur-fast) var(--ep-ease-out);
}
a:hover, .ep-link:hover { color: var(--ep-signal-600); border-bottom-color: currentColor; }

::selection { background: var(--ep-lumen-100); color: var(--ep-black); }