/* ==========================================================================
   Design Bridge — Enlighten Pro design-system layer
   ==========================================================================
   Tokens lifted from enlighten-design/colors_and_type.css v2026.08.01.2.
   Every page links this BEFORE its own <style>, then references tokens
   (var(--ep-*)) instead of hard-coding hex — the house rule.

   Type, per the system:
     Montserrat      display only, >= 24px
     IBM Plex Sans   all UI and body < 24px
     JetBrains Mono  numerics only, with tabular-nums
   Never serif. (Design Bridge shipped with Times New Roman headings until
   2026-08-02; that was the single biggest deviation from the brand.)
   ========================================================================== */

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

:root {
  /* ---------- MONO RAMP ---------- */
  --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;

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

  /* ---------- 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;

  /* ---------- SEMANTIC ---------- */
  --ep-success:    #1F8A4C;
  --ep-success-bg: #E4F3EA;
  --ep-warning:    #D98A0B;
  --ep-warning-bg: #FFF2D4;
  --ep-danger:     #C0392B;
  --ep-danger-bg:  #F8E2DF;

  /* ---------- ALIASES ---------- */
  --ep-fg-1: var(--ep-ink);
  --ep-fg-2: var(--ep-steel);
  --ep-fg-3: var(--ep-slate);
  --ep-bg-1: var(--ep-white);
  --ep-bg-2: var(--ep-paper);
  --ep-bg-3: var(--ep-haze);
  --ep-border-1: var(--ep-haze);
  --ep-accent: var(--ep-lumen-500);

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

  --ep-track-tight: -0.02em;
  --ep-track-wide:  0.04em;
  --ep-track-widest: 0.22em;

  /* ---------- SHAPE ---------- */
  /* House radii: 14px cards, 999px pills, 8px inputs. */
  --ep-radius-card:  14px;
  --ep-radius-pill:  999px;
  --ep-radius-input: 8px;
  --ep-hairline: 1px solid rgba(0,0,0,.08);

  --ep-ease-out: cubic-bezier(.2,.7,.2,1);
  --ep-dur-fast: 120ms;
  --ep-dur-base: 200ms;
}

/* Numerics always tabular, wherever they appear. */
.num, .ep-mono, .ep-value {
  font-family: var(--ep-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---------- Brand mark ----------------------------------------------------
   The wordmark is ONE locked artwork. Always the -tight crop whenever CSS
   sets a height: the padded master is ~88% transparent and renders at about
   an eighth of its intended size. Never type "Enlighten Pro" beside it.
   "Design Bridge" is a product name, so it sits after a hairline divider —
   a separate label, not part of the artwork. */
.ep-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  border-bottom: 0;
}
.ep-brand img {
  height: 17px;
  width: auto;
  display: block;
}
.ep-brand .ep-brand-rule {
  width: 1px;
  height: 18px;
  background: rgba(0,0,0,.14);
}
.ep-brand .ep-brand-name {
  font-family: var(--ep-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--ep-track-wide);
  color: var(--ep-fg-2);
  white-space: nowrap;
}
.ep-brand:hover .ep-brand-name { color: var(--ep-fg-1); }

/* Eyebrow — mono, wide-tracked, uppercase. */
.ep-eyebrow {
  font: 500 12px/1 var(--ep-font-mono);
  letter-spacing: var(--ep-track-widest);
  text-transform: uppercase;
  color: var(--ep-fg-3);
}

/* ---------- Small shared pieces ---------- */
.ep-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ep-fg-2);
  background: var(--ep-bg-2);
  border: var(--ep-hairline);
  border-radius: var(--ep-radius-card);
  padding: 14px 16px;
}
.ep-note--warn {
  background: var(--ep-warning-bg);
  border-color: rgba(217,138,11,.28);
  color: #6E4405;
}
.ep-note--danger {
  background: var(--ep-danger-bg);
  border-color: rgba(192,57,43,.28);
  color: #8C2A1F;
}

.ep-btn {
  font-family: var(--ep-font-sans);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 20px;
  border-radius: var(--ep-radius-pill);
  border: 0;
  cursor: pointer;
  transition: background var(--ep-dur-fast) var(--ep-ease-out),
              color var(--ep-dur-fast) var(--ep-ease-out);
}
.ep-btn--primary { background: var(--ep-ink); color: var(--ep-white); }
.ep-btn--primary:hover { background: var(--ep-black); }
.ep-btn--primary:disabled { background: var(--ep-fog); color: var(--ep-slate); cursor: not-allowed; }
.ep-btn--quiet {
  background: var(--ep-white);
  color: var(--ep-fg-1);
  border: var(--ep-hairline);
}
.ep-btn--quiet:hover { background: var(--ep-bg-2); }

.ep-field { display: block; margin-bottom: 16px; }
.ep-field > span {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--ep-track-wide);
  text-transform: uppercase;
  color: var(--ep-fg-3);
  margin-bottom: 6px;
}
.ep-field input, .ep-field textarea, .ep-field select {
  width: 100%;
  font-family: var(--ep-font-sans);
  font-size: 15px;
  color: var(--ep-fg-1);
  padding: 10px 12px;
  border: 1px solid var(--ep-fog);
  border-radius: var(--ep-radius-input);
  background: var(--ep-white);
}
.ep-field input:focus, .ep-field textarea:focus, .ep-field select:focus {
  outline: none;
  border-color: var(--ep-signal-500);
}
.ep-field .ep-hint {
  display: block;
  font-size: 12px;
  color: var(--ep-fg-3);
  margin-top: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}