/* ============================================================
   ILA Marketing Pages — Design Tokens
   Shared stylesheet for all root-level HTML pages.
   Fonts served from /ILADesign/fonts/ (no CDN).
   Dark theme is the default for marketing/documentation pages.
   ============================================================ */

/* ── Fonts ───────────────────────────────────────────────── */
@font-face {
  font-family: "Inter";
  src: url("./ILADesign/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./ILADesign/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./ILADesign/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("./ILADesign/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./ILADesign/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./ILADesign/fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  /* Neutral scale */
  --neutral-0:   #ffffff;
  --neutral-25:  #fafbfc;
  --neutral-50:  #f5f6f8;
  --neutral-100: #eceef2;
  --neutral-150: #e2e5eb;
  --neutral-200: #d3d8e0;
  --neutral-300: #b6bcc7;
  --neutral-400: #8b93a1;
  --neutral-500: #6b7383;
  --neutral-600: #4d5462;
  --neutral-700: #353a45;
  --neutral-800: #20242c;
  --neutral-900: #11141a;
  --neutral-950: #0a0c10;

  /* Brand — ILA navy */
  --brand-50:  #eef3f9;
  --brand-100: #d6e0ee;
  --brand-200: #adc1dc;
  --brand-300: #7fa0c2;
  --brand-400: #4f7aa3;
  --brand-500: #1f4f7a;
  --brand-600: #173a6a;
  --brand-700: #102b53;
  --brand-800: #0b2040;
  --brand-900: #07172e;

  /* Accent — ILA teal */
  --teal-50:  #e6f6f5;
  --teal-100: #c2eae8;
  --teal-200: #8fd8d4;
  --teal-300: #4ec3bd;
  --teal-400: #2dc3bd;
  --teal-500: #15a5a0;
  --teal-600: #0e8682;
  --teal-700: #0a6967;

  /* Data palette */
  --data-1: #173a6a;
  --data-2: #15a5a0;
  --data-3: #4f7aa3;
  --data-4: #ea7c3a;
  --data-5: #8b5cf6;
  --data-6: #0891b2;
  --data-7: #65a30d;
  --data-8: #b45309;

  /* Semantic */
  --success-50:  #ecfdf3; --success-500: #12b76a; --success-700: #027a48;
  --warning-50:  #fffaeb; --warning-500: #f79009; --warning-700: #b54708;
  --danger-50:   #fef3f2; --danger-500:  #f04438; --danger-700:  #b42318;
  --info-50:     #eef3f9; --info-500:    #1f4f7a; --info-700:    #102b53;

  /* Spacing (4 px base) */
  --space-1: 2px;  --space-2: 4px;   --space-3: 8px;
  --space-4: 12px; --space-5: 16px;  --space-6: 20px;
  --space-7: 24px; --space-8: 32px;  --space-9: 40px;
  --space-10: 48px; --space-11: 64px; --space-12: 80px;

  /* Radius */
  --radius-xs: 3px; --radius-sm: 5px;   --radius-md: 8px;
  --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;

  /* Motion */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 80ms; --dur-2: 160ms; --dur-3: 240ms; --dur-4: 360ms;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px;
  --fs-24: 24px; --fs-28: 28px; --fs-30: 30px; --fs-36: 36px;
  --fs-48: 48px; --fs-56: 56px;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.5; --lh-loose: 1.65;
  --tracking-tight: -0.012em; --tracking-normal: 0; --tracking-wide: 0.04em;

  /* Layout */
  --sidebar-w: 240px; --topbar-h: 52px; --maxw-content: 1440px;
  --z-sticky: 20; --z-dropdown: 100; --z-modal: 1000; --z-toast: 1100;

  /* Light theme surfaces (default, overridden below for dark) */
  --bg-app:        var(--neutral-25);
  --bg-canvas:     var(--neutral-0);
  --bg-sunken:     var(--neutral-50);
  --bg-muted:      var(--neutral-100);
  --fg-1: var(--neutral-900);
  --fg-2: var(--neutral-700);
  --fg-3: var(--neutral-500);
  --fg-4: var(--neutral-400);
  --fg-on-brand: var(--neutral-0);
  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-150);
  --border-strong:  var(--neutral-300);
  --border-focus:   var(--brand-500);
  --accent:         var(--brand-600);
  --accent-hover:   var(--brand-700);
  --accent-press:   var(--brand-800);
  --accent-soft:    var(--brand-50);
  --teal:           var(--teal-500);
  --teal-soft:      var(--teal-50);
  --shadow-xs: 0 1px 0 rgba(17,20,26,.04);
  --shadow-sm: 0 1px 2px rgba(17,20,26,.06), 0 1px 1px rgba(17,20,26,.04);
  --shadow-md: 0 4px 12px rgba(17,20,26,.08), 0 1px 2px rgba(17,20,26,.04);
  --shadow-lg: 0 12px 32px rgba(17,20,26,.12), 0 2px 6px rgba(17,20,26,.06);
  --shadow-focus: 0 0 0 3px rgba(23,58,106,.20);
}

/* ── Dark theme (default for marketing pages) ────────────── */
[data-theme="dark"] {
  --bg-app:     var(--neutral-950);   /* #0a0c10 */
  --bg-canvas:  var(--neutral-900);   /* #11141a */
  --bg-sunken:  #0d1016;
  --bg-muted:   var(--neutral-800);   /* #20242c */
  --bg-overlay: rgba(0,0,0,.6);
  --fg-1: #f1f3f7;
  --fg-2: #cdd2dc;
  --fg-3: #8b93a1;
  --fg-4: #5d6573;
  --border-subtle:  #1b1f27;
  --border-default: #262b35;
  --border-strong:  #353b48;
  --accent:         var(--teal-400);     /* #2dc3bd — teal in dark */
  --accent-hover:   var(--teal-300);
  --accent-press:   var(--teal-500);
  --accent-soft:    rgba(45,195,189,.15);
  --teal:           var(--teal-400);
  --teal-soft:      rgba(45,195,189,.12);
  --shadow-xs: 0 1px 0 rgba(0,0,0,.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
  --shadow-focus: 0 0 0 3px rgba(45,195,189,.3);
}

/* ── Global reset for pages that include this sheet ─────── */
*, *::before, *::after { box-sizing: border-box; }

html[data-theme="dark"] {
  background: var(--bg-app);
  color: var(--fg-2);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

/* ── Typography utility classes ──────────────────────────── */
.t-display {
  font: 600 var(--fs-36)/var(--lh-tight) var(--font-sans);
  letter-spacing: var(--tracking-tight); color: var(--fg-1);
}
.t-h1 { font: 600 var(--fs-24)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-h2 { font: 600 var(--fs-20)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.t-h3 { font: 600 var(--fs-16)/var(--lh-snug) var(--font-sans); color: var(--fg-1); }
.t-h4 { font: 600 var(--fs-14)/var(--lh-snug) var(--font-sans); color: var(--fg-1); }
.t-body    { font: 400 var(--fs-14)/var(--lh-base) var(--font-sans); color: var(--fg-2); }
.t-body-sm { font: 400 var(--fs-13)/var(--lh-base) var(--font-sans); color: var(--fg-2); }
.t-caption { font: 400 var(--fs-12)/var(--lh-snug) var(--font-sans); color: var(--fg-3); }
.t-eyebrow {
  font: 500 var(--fs-11)/var(--lh-snug) var(--font-sans);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3);
}
.t-label  { font: 500 var(--fs-13)/var(--lh-snug) var(--font-sans); color: var(--fg-2); }
.t-num    { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; color: var(--fg-1); }
.t-num-display {
  font: 600 var(--fs-30)/var(--lh-tight) var(--font-sans);
  font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight); color: var(--fg-1);
}
.t-mono { font: 400 var(--fs-13)/var(--lh-base) var(--font-mono); color: var(--fg-2); }

/* ── Card ────────────────────────────────────────────────── */
.ila-card {
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.ila-card__header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 8px;
}
.ila-card__body { padding: var(--space-5); }

/* ── Button ──────────────────────────────────────────────── */
.ila-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  font: 500 var(--fs-13)/1 var(--font-sans);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out);
  text-decoration: none;
}
.ila-btn--primary {
  background: var(--accent); color: var(--neutral-950); border-color: var(--accent);
}
.ila-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.ila-btn--secondary {
  background: transparent; color: var(--fg-1);
  border-color: var(--border-default);
}
.ila-btn--secondary:hover { background: var(--bg-muted); }
.ila-btn--ghost { background: transparent; color: var(--fg-2); border-color: transparent; }
.ila-btn--ghost:hover { background: var(--bg-muted); color: var(--fg-1); }

/* ── Badge ───────────────────────────────────────────────── */
.ila-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  font: 500 var(--fs-11)/var(--lh-snug) var(--font-sans);
  border-radius: var(--radius-xs);
  letter-spacing: 0.01em;
}
.ila-badge--brand   { background: var(--accent-soft); color: var(--accent); }
.ila-badge--success { background: var(--success-50);  color: var(--success-700); }
.ila-badge--warning { background: var(--warning-50);  color: var(--warning-700); }
.ila-badge--danger  { background: var(--danger-50);   color: var(--danger-700); }
.ila-badge--neutral { background: var(--bg-muted);    color: var(--fg-3); }

/* ── KPI tile ────────────────────────────────────────────── */
.ila-kpi {
  background: var(--bg-canvas);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.ila-kpi__label { font: 500 var(--fs-12)/1 var(--font-sans); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.04em; }
.ila-kpi__value { font: 600 var(--fs-28)/1 var(--font-sans); color: var(--fg-1); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ila-kpi__delta { font: 500 var(--fs-12)/1 var(--font-sans); }
.ila-kpi__delta--up   { color: var(--success-500); }
.ila-kpi__delta--down { color: var(--danger-500); }

/* ── Nav / topbar ────────────────────────────────────────── */
.ila-nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: var(--topbar-h);
  background: var(--bg-canvas);
  border-bottom: 1px solid var(--border-default);
  display: flex; align-items: center; padding: 0 24px; gap: 20px;
}
.ila-nav__brand {
  font: 600 var(--fs-15)/1 var(--font-sans);
  color: var(--fg-1); letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.ila-nav__links { display: flex; align-items: center; gap: 4px; }
.ila-nav__link {
  padding: 5px 10px; border-radius: var(--radius-sm);
  font: 500 var(--fs-13)/1 var(--font-sans); color: var(--fg-3);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.ila-nav__link:hover  { background: var(--bg-muted); color: var(--fg-1); }
.ila-nav__link--active { color: var(--accent); }

/* ── Sidebar layout ──────────────────────────────────────── */
.ila-layout { display: flex; min-height: 100vh; }
.ila-sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--bg-canvas);
  border-right: 1px solid var(--border-default);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: 20px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.ila-sidebar__group {
  font: 500 var(--fs-11)/1 var(--font-sans);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-4); padding: 14px 8px 4px;
}
.ila-sidebar__item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  font: 400 var(--fs-13)/1.4 var(--font-sans); color: var(--fg-2);
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.ila-sidebar__item:hover    { background: var(--bg-sunken); color: var(--fg-1); }
.ila-sidebar__item--active  { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.ila-content { flex: 1; min-width: 0; overflow-x: hidden; }

/* ── Divider ─────────────────────────────────────────────── */
.ila-divider {
  border: none; border-top: 1px solid var(--border-subtle); margin: 0;
}

/* ── Accent rule (section label line) ────────────────────── */
.ila-section-label {
  display: flex; align-items: center; gap: 12px;
  font: 500 var(--fs-11)/1 var(--font-sans);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--accent);
}
.ila-section-label::after {
  content: ""; flex: 1; height: 1px; background: var(--border-subtle);
}

/* ── Alert / callout ─────────────────────────────────────── */
.ila-alert {
  padding: 12px 16px; border-radius: var(--radius-md);
  border-left: 3px solid; font: 400 var(--fs-13)/var(--lh-base) var(--font-sans);
}
.ila-alert--info    { background: var(--accent-soft);   border-color: var(--accent);         color: var(--fg-1); }
.ila-alert--success { background: var(--success-50);    border-color: var(--success-500);    color: var(--fg-1); }
.ila-alert--warning { background: var(--warning-50);    border-color: var(--warning-500);    color: var(--fg-1); }
.ila-alert--danger  { background: var(--danger-50);     border-color: var(--danger-500);     color: var(--fg-1); }

/* ── Table ───────────────────────────────────────────────── */
.ila-table { width: 100%; border-collapse: collapse; font: 400 var(--fs-13)/1 var(--font-sans); }
.ila-table th {
  padding: 10px 14px; text-align: left;
  font: 500 var(--fs-11)/1 var(--font-sans);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-3); background: var(--bg-sunken);
  border-bottom: 1px solid var(--border-default);
}
.ila-table td {
  padding: 10px 14px; color: var(--fg-2);
  border-bottom: 1px solid var(--border-subtle);
}
.ila-table tr:hover td { background: var(--bg-sunken); }
.ila-table tr:last-child td { border-bottom: none; }