/* =========================================================
   ui.mltn.ai — BNMR GLVZ dashboard token layer
   Extends colors_and_type.css with dashboard-specific tokens,
   density scales, and a dark mode mirror.
   ========================================================= */

/* ---------- Archivo (subset for dashboard UI) ---------- */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('../design-system/fonts/Archivo-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('../design-system/fonts/Archivo-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('../design-system/fonts/Archivo-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('../design-system/fonts/Archivo-Bold.ttf') format('truetype'); }

@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../design-system/fonts/ArchivoNarrow-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../design-system/fonts/ArchivoNarrow-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Archivo Narrow'; font-style: normal; font-weight: 700; font-display: swap; src: url('../design-system/fonts/ArchivoNarrow-Bold.ttf') format('truetype'); }

@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../design-system/fonts/SpaceMono-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../design-system/fonts/SpaceMono-Bold.ttf') format('truetype'); }

:root {
  /* ---------- Light tokens (canonical brand) ---------- */
  --bg: #FFFFFF;
  --bg-2: #F4F5F7;
  --bg-3: #ECEEF1;
  --ink: #0A0A0A;
  --ink-2: #4A4F56;
  --ink-3: #8A8F96;
  --line: #E4E7EB;
  --line-2: #C9CDD3;

  /* gradient stops */
  --grad-1: #2ABFB5;
  --grad-2: #0E8FBF;
  --grad-3: #6E2FA5;
  --grad-4: #D3278B;
  --grad-5: #E04A2F;

  --brand-grad: linear-gradient(90deg, #2ABFB5 0%, #0E8FBF 30%, #6E2FA5 65%, #D3278B 95%);
  --brand-grad-rev: linear-gradient(90deg, #D3278B 0%, #6E2FA5 35%, #0E8FBF 70%, #2ABFB5 100%);
  --brand-grad-band: linear-gradient(120deg, #D3278B 0%, #6E2FA5 40%, #0E8FBF 75%, #2ABFB5 100%);

  /* tile tints */
  --ph-pink: linear-gradient(135deg, #F5A3C8 0%, #D3278B 55%, #6E2FA5 100%);
  --ph-teal: linear-gradient(135deg, #7FD8CE 0%, #2ABFB5 55%, #0E8FBF 100%);
  --ph-magenta: linear-gradient(135deg, #C289DB 0%, #7B3F97 55%, #3A1056 100%);
  --ph-orange: linear-gradient(135deg, #F5B38F 0%, #E04A2F 55%, #8C1D14 100%);
  --ph-ink: linear-gradient(135deg, #1C2230 0%, #0A0A0A 100%);
  --ph-overlay: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);

  /* type families */
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --narrow: 'Archivo Narrow', 'Archivo', sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;

  /* radii */
  --r-sharp: 4px;
  --r-pill: 999px;

  /* status colors (dashboard-specific, derived from brand stops) */
  --pos: #1F8A5B;     /* positive — calmer green than pure brand */
  --pos-bg: #E6F4EE;
  --neg: #C13434;     /* negative */
  --neg-bg: #F8E6E6;
  --warn: #B5731A;    /* warning */
  --warn-bg: #F8EFD9;
  --info: #0E8FBF;    /* info — uses brand blue */
  --info-bg: #DDEEF6;

  /* ---------- Density (default = comfortable) ---------- */
  --d-row-h: 56px;          /* table row height */
  --d-cell-px: 20px;        /* cell horizontal padding */
  --d-cell-py: 16px;        /* cell vertical padding */
  --d-card-p: 28px;         /* card inner padding */
  --d-card-gap: 24px;       /* gap between cards in grids */
  --d-input-h: 44px;        /* input height */
  --d-input-px: 16px;       /* input horizontal padding */
  --d-btn-h: 40px;          /* default button height */
  --d-btn-px: 20px;
  --d-section-y: 56px;      /* page section vertical rhythm */
  --d-stack-y: 24px;        /* default vertical gap */
  --d-page-px: 48px;        /* page horizontal padding */

  /* ---------- App shell ---------- */
  --shell-sidebar-w: 248px;
  --shell-sidebar-w-icon: 64px;
  --shell-topbar-h: 64px;
  --shell-status-h: 2px;

  /* type size root scale (Tweaks-controllable) */
  --type-scale: 1;

  /* motion */
  --ease-reveal: cubic-bezier(.2,.7,.2,1);
  --ease-sweep: cubic-bezier(.86,0,.07,1);

  color-scheme: light;
}

/* ---------- Density modes ---------- */
[data-density="standard"] {
  --d-row-h: 48px;
  --d-cell-px: 16px;
  --d-cell-py: 12px;
  --d-card-p: 22px;
  --d-card-gap: 20px;
  --d-input-h: 40px;
  --d-input-px: 14px;
  --d-btn-h: 36px;
  --d-btn-px: 16px;
  --d-section-y: 44px;
  --d-stack-y: 18px;
  --d-page-px: 40px;
}
[data-density="dense"] {
  --d-row-h: 40px;
  --d-cell-px: 12px;
  --d-cell-py: 8px;
  --d-card-p: 16px;
  --d-card-gap: 14px;
  --d-input-h: 34px;
  --d-input-px: 12px;
  --d-btn-h: 30px;
  --d-btn-px: 14px;
  --d-section-y: 32px;
  --d-stack-y: 12px;
  --d-page-px: 28px;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  --bg: #0A0A0A;
  --bg-2: #131318;
  --bg-3: #1B1C22;
  --ink: #F4F5F7;
  --ink-2: #B5B9C0;
  --ink-3: #6E7178;
  --line: #1F2027;
  --line-2: #2C2F37;

  --pos: #4FB37F;
  --pos-bg: #11221A;
  --neg: #E36464;
  --neg-bg: #2A1414;
  --warn: #D69A3F;
  --warn-bg: #2A2010;
  --info: #4FB0DA;
  --info-bg: #102230;

  color-scheme: dark;
}

/* ========== Base ========== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
html { font-size: calc(16px * var(--type-scale)); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--grad-4); color: white; }
:focus-visible { outline: 2px solid var(--grad-4); outline-offset: 2px; }

button { font-family: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }

/* ========== Type scale (dashboard variant) ========== */
.h-display { font-family: var(--sans); font-weight: 600; letter-spacing: -0.04em; line-height: .95; font-size: clamp(40px, 5vw, 72px); margin: 0; }
.h-1 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.032em; line-height: 1.0; font-size: clamp(32px, 3.4vw, 48px); margin: 0; }
.h-2 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; font-size: clamp(22px, 2vw, 28px); margin: 0; }
.h-3 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; font-size: 18px; margin: 0; }
.h-4 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; font-size: 15px; margin: 0; }
.lead { font-size: 17px; font-weight: 400; line-height: 1.5; color: var(--ink-2); margin: 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--brand-grad);
  display: inline-block;
}
.eyebrow.no-bar::before { display: none; }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.grad-text {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.num {
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ========== Surfaces ========== */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sharp);
  padding: var(--d-card-p);
}
.card.tint { background: var(--bg-2); }
.hairline-t { border-top: 1px solid var(--line); }
.hairline-b { border-bottom: 1px solid var(--line); }
.hairline-l { border-left: 1px solid var(--line); }
.hairline-r { border-right: 1px solid var(--line); }
.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }
.divider-2 { border: 0; border-top: 1px solid var(--line-2); margin: 0; }
.gradient-bar { display: inline-block; width: 36px; height: 2px; background: var(--brand-grad); }

/* ========== Status strip ========== */
.status-strip {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--shell-status-h);
  background: var(--bg-2);
  z-index: 100;
}
.status-strip > i {
  display: block;
  height: 100%;
  width: var(--p, 30%);
  background: var(--brand-grad);
  transition: width 200ms linear;
}

/* ========== Scrollbar polish ========== */
.scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ========== Utility chips ========== */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}

/* ========== Page scaffolding ========== */
.app {
  display: grid;
  grid-template-columns: var(--shell-sidebar-w) 1fr;
  min-height: 100vh;
  background: var(--bg);
}
[data-sidebar="icon"] .app { grid-template-columns: var(--shell-sidebar-w-icon) 1fr; }
[data-sidebar="hidden"] .app { grid-template-columns: 0 1fr; }

.page {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}
.page-body {
  flex: 1;
  padding: var(--d-section-y) var(--d-page-px);
  display: flex;
  flex-direction: column;
  gap: var(--d-section-y);
  min-width: 0;
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.page-head .titles { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.page-head .actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* utility flex helpers */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }

/* hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* prefers reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}