/* ============================================================================
   Elev8 Design System — the source of truth for the presentation layer.
   Approved design language (persona workspaces build on this; do not fork it).
   Self-contained: no external fonts/CDNs. Archivo is self-hosted (see @font-face);
   until the woff2 files are added it falls back to the system stack.
   Tokens extracted from the approved App Shell / Style Guide / Client designs.
   ============================================================================ */

/* ---- Self-hosted brand font (add files to /assets/fonts/, then this activates) ---- */
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:800; font-display:swap;
  src:local('Archivo'), url('/assets/fonts/archivo-800.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:900; font-display:swap;
  src:local('Archivo'), url('/assets/fonts/archivo-900.woff2') format('woff2');
}

:root{
  /* Brand accent */
  --e-acc:#ec6f16; --e-acc-strong:#c25610; --e-acc-bright:#f5871f;
  --e-acc-tint:#fdf0e6; --e-acc-ring:rgba(236,111,22,.28);

  /* Neutral ramp (light) */
  --e-n-0:#ffffff; --e-n-25:#f6f7f9; --e-n-50:#f2f3f6; --e-n-100:#eef0f3;
  --e-n-150:#e7e9ee; --e-n-200:#d7dbe1; --e-n-300:#c9ced6; --e-n-400:#9298a3;
  --e-n-500:#616774; --e-n-600:#3a3f49; --e-n-700:#252a31; --e-n-800:#14181d;
  --e-n-900:#0d0d0d;

  /* Semantic surfaces (light theme default) */
  --e-bg:var(--e-n-100); --e-surface:var(--e-n-0); --e-surface-2:var(--e-n-25);
  --e-line:var(--e-n-200); --e-ink:#1d2127; --e-muted:var(--e-n-500);
  --e-nav-bg:var(--e-n-900); --e-nav-ink:#f4f5f7; --e-nav-muted:#8b929c; --e-nav-active:#1c2128;

  /* Status semantics (colour + tint, always paired with text/icon — never colour alone) */
  --e-ok:#1a7f4b;   --e-ok-tint:#e7f4ec;
  --e-info:#1f5fbf; --e-info-tint:#e7eefb;
  --e-warn:#8a5a12; --e-warn-tint:#fbf1df;
  --e-err:#b3261e;  --e-err-tint:#fbeae9;
  --e-neutral:#565c68; --e-neutral-tint:#eef0f3;

  /* Typography */
  --e-font-brand:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --e-font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --e-font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --e-fs-9:9px;  --e-fs-10:10px; --e-fs-11:11px; --e-fs-12:12px; --e-fs-13:13px;
  --e-fs-14:14px; --e-fs-16:16px; --e-fs-17:17px; --e-fs-20:20px; --e-fs-23:23px; --e-fs-38:38px;
  --e-lh:1.5; --e-lh-tight:1.2;

  /* Spacing (4/8) */
  --e-s-1:4px; --e-s-2:8px; --e-s-3:12px; --e-s-4:16px; --e-s-5:20px; --e-s-6:24px;
  --e-s-8:32px; --e-s-10:40px; --e-s-12:48px;

  /* Radius + elevation */
  --e-r-sm:8px; --e-r:11px; --e-r-lg:14px; --e-r-pill:999px;
  --e-shadow-1:0 1px 2px rgba(20,24,29,.06),0 1px 3px rgba(20,24,29,.05);
  --e-shadow-2:0 4px 14px rgba(20,24,29,.10);
  --e-focus:0 0 0 3px var(--e-acc-ring);
}

/* ---- Dark theme: system preference + explicit [data-theme] override ---- */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --e-bg:#0f1216; --e-surface:#171b21; --e-surface-2:#1c2128;
  --e-line:#2a2f37; --e-ink:#e7e9ee; --e-muted:#9298a3;
  --e-nav-bg:#0a0c0f; --e-nav-active:#1c2128;
  --e-ok-tint:#10281c; --e-info-tint:#10203a; --e-warn-tint:#2a2011; --e-err-tint:#2c1412; --e-neutral-tint:#20242b;
}}
:root[data-theme="dark"]{
  --e-bg:#0f1216; --e-surface:#171b21; --e-surface-2:#1c2128;
  --e-line:#2a2f37; --e-ink:#e7e9ee; --e-muted:#9298a3;
  --e-nav-bg:#0a0c0f; --e-nav-active:#1c2128;
  --e-ok-tint:#10281c; --e-info-tint:#10203a; --e-warn-tint:#2a2011; --e-err-tint:#2c1412; --e-neutral-tint:#20242b;
}

/* ============================ Base ============================ */
.e-root{ background:var(--e-bg); color:var(--e-ink); font-family:var(--e-font-ui);
  font-size:var(--e-fs-14); line-height:var(--e-lh); -webkit-font-smoothing:antialiased; }
.e-h1{ font-family:var(--e-font-brand); font-weight:900; font-size:var(--e-fs-23); letter-spacing:-.4px; line-height:var(--e-lh-tight); }
.e-h2{ font-family:var(--e-font-brand); font-weight:800; font-size:var(--e-fs-17); letter-spacing:-.2px; }
.e-eyebrow{ font-size:var(--e-fs-11); font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--e-acc-strong); }
.e-muted{ color:var(--e-muted); } .e-tnum{ font-variant-numeric:tabular-nums; }

/* ============================ Buttons ============================ */
.e-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--e-s-2);
  font:inherit; font-weight:700; padding:10px 14px; border-radius:var(--e-r);
  border:1px solid var(--e-line); background:var(--e-surface); color:var(--e-ink); cursor:pointer;
  transition:background .12s,border-color .12s,transform .04s; }
.e-btn:hover{ background:var(--e-surface-2); }
.e-btn:active{ transform:translateY(1px); }
.e-btn:focus-visible{ outline:none; box-shadow:var(--e-focus); }
.e-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.e-btn--primary{ background:var(--e-acc); border-color:var(--e-acc); color:#fff; }
.e-btn--primary:hover{ background:var(--e-acc-strong); border-color:var(--e-acc-strong); }
.e-btn--ghost{ background:transparent; border-color:transparent; }
.e-btn--danger{ background:var(--e-err); border-color:var(--e-err); color:#fff; }
.e-btn--sm{ padding:6px 10px; font-size:var(--e-fs-13); }

/* ============================ Surfaces ============================ */
.e-card{ background:var(--e-surface); border:1px solid var(--e-line); border-radius:var(--e-r-lg);
  padding:var(--e-s-5); box-shadow:var(--e-shadow-1); }
.e-card__title{ font-size:var(--e-fs-12); font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--e-muted); margin-bottom:var(--e-s-3); }

/* KPI tile (Control Tower style) */
.e-kpi{ background:var(--e-surface); border:1px solid var(--e-line); border-radius:var(--e-r-lg);
  padding:var(--e-s-4) var(--e-s-5); display:flex; flex-direction:column; gap:2px; }
.e-kpi__value{ font-family:var(--e-font-brand); font-weight:900; font-size:var(--e-fs-38); line-height:1; letter-spacing:-1px; }
.e-kpi__label{ font-size:var(--e-fs-13); color:var(--e-muted); font-weight:600; }
.e-kpi--accent .e-kpi__value{ color:var(--e-acc); }

/* ============================ Status chips (first-class) ============================ */
.e-chip{ display:inline-flex; align-items:center; gap:6px; font-size:var(--e-fs-12); font-weight:800;
  padding:4px 10px; border-radius:var(--e-r-pill); letter-spacing:.01em; }
.e-chip .e-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
.e-chip--ok{ background:var(--e-ok-tint); color:var(--e-ok); }
.e-chip--info{ background:var(--e-info-tint); color:var(--e-info); }
.e-chip--warn{ background:var(--e-warn-tint); color:var(--e-warn); }
.e-chip--err{ background:var(--e-err-tint); color:var(--e-err); }
.e-chip--neutral{ background:var(--e-neutral-tint); color:var(--e-neutral); }

/* ============================ Forms ============================ */
.e-label{ display:block; font-size:var(--e-fs-13); font-weight:700; color:var(--e-muted); margin-bottom:6px; }
.e-input,.e-select,.e-textarea{ width:100%; font:inherit; color:var(--e-ink); background:var(--e-surface);
  border:1px solid var(--e-line); border-radius:var(--e-r-sm); padding:10px 12px; }
.e-input:focus,.e-select:focus,.e-textarea:focus{ outline:none; border-color:var(--e-acc); box-shadow:var(--e-focus); }
.e-textarea{ min-height:88px; resize:vertical; }

/* ============================ Table / list ============================ */
.e-table{ width:100%; border-collapse:collapse; font-size:var(--e-fs-14); }
.e-table th{ text-align:left; font-size:var(--e-fs-12); font-weight:800; color:var(--e-muted);
  text-transform:uppercase; letter-spacing:.04em; padding:8px 10px; position:sticky; top:0; background:var(--e-surface); }
.e-table td{ padding:10px; border-top:1px solid var(--e-line); }
.e-table td.num,.e-table th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.e-table tbody tr:hover,.e-table tr:hover{ background:var(--e-surface-2); }

/* ============================ Nav (dark sidebar shell) ============================ */
.e-nav{ background:var(--e-nav-bg); color:var(--e-nav-ink); }
.e-nav__section{ font-size:var(--e-fs-11); font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--e-nav-muted); padding:var(--e-s-4) var(--e-s-5) var(--e-s-2); }
.e-nav__item{ display:flex; align-items:center; gap:var(--e-s-3); padding:10px var(--e-s-4); margin:2px var(--e-s-3);
  border-radius:var(--e-r-sm); color:var(--e-nav-ink); font-weight:600; cursor:pointer; text-decoration:none; }
.e-nav__item:hover{ background:var(--e-nav-active); }
.e-nav__item[aria-current="page"]{ background:var(--e-nav-active); box-shadow:inset 3px 0 0 var(--e-acc); }
.e-nav__icon{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; color:#fff; flex:0 0 auto; }

/* ============================ Feedback ============================ */
.e-skeleton{ background:linear-gradient(90deg,var(--e-n-100),var(--e-n-50),var(--e-n-100));
  background-size:200% 100%; animation:e-shimmer 1.2s infinite; border-radius:var(--e-r-sm); }
@keyframes e-shimmer{ to{ background-position:-200% 0; } }
.e-empty{ text-align:center; color:var(--e-muted); padding:var(--e-s-10) var(--e-s-5); }
.e-empty__title{ font-weight:800; color:var(--e-ink); margin-bottom:4px; }

/* ============================ A11y ============================ */
.e-visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
:where(a,button,[tabindex]):focus-visible{ outline:none; box-shadow:var(--e-focus); border-radius:var(--e-r-sm); }
@media print{ .e-nav,.e-btn{ display:none !important; } }