/* ============================================================
   BodyCam Analytics — Foundations
   Serious, business-like, built for strength. Cool slate
   neutrals, deep steel-navy primary, hard near-black darks.
   ============================================================ */

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

:root {
  /* ---------- Color: neutrals (cool slate) ---------- */
  --paper-50:  #f7f8fa;   /* lightest — page background lift */
  --paper-100: #ebedf0;   /* cool gray — default canvas */
  --paper-200: #dfe1e6;   /* hairline */
  --paper-300: #cbced6;   /* divider */
  --paper-400: #9aa1ad;   /* faded text */
  --paper-500: #6b717b;   /* muted */

  --ink-50:  #eef0f3;
  --ink-100: #e0e3e8;
  --ink-200: #c4c9d2;
  --ink-300: #8c93a0;
  --ink-400: #555c68;     /* secondary text */
  --ink-500: #343a44;     /* tertiary headings */
  --ink-600: #1e232b;     /* body text */
  --ink-700: #0e131a;     /* hard near-black */
  --ink-900: #06090d;

  /* ---------- Color: primary (navy) ---------- */
  --navy-50:  #eef2f8;
  --navy-100: #d6dfee;
  --navy-200: #a9bbd6;
  --navy-300: #6f8ab8;
  --navy-400: #3d5e95;
  --navy-500: #1f3a5f;    /* PRIMARY */
  --navy-600: #182d4a;
  --navy-700: #112238;
  --navy-800: #0b1726;

  /* ---------- Color: semantic accents (muted) ---------- */
  --green-100: #e3ece2;
  --green-500: #3d6b48;
  --green-600: #2f5639;

  --amber-100: #f4e8cf;
  --amber-500: #a4761d;
  --amber-600: #815a13;

  --red-100: #f1dcd6;
  --red-500: #8e3b2b;
  --red-600: #6f2c1f;

  /* ---------- Semantic surface tokens ---------- */
  --bg:           var(--paper-100);
  --bg-elevated:  #ffffff;
  --bg-sunken:    var(--paper-50);
  --bg-sidebar:   #e4e6ea;
  --bg-hover:     rgba(31, 58, 95, 0.05);
  --bg-active:    rgba(31, 58, 95, 0.09);

  --fg-1:         var(--ink-700);  /* primary text */
  --fg-2:         var(--ink-600);  /* body */
  --fg-3:         var(--ink-400);  /* secondary */
  --fg-4:         var(--ink-300);  /* tertiary / placeholder */
  --fg-inverse:   #ffffff;

  --border:       var(--paper-300);
  --border-strong:var(--paper-400);
  --border-input: var(--ink-200);

  --accent:       var(--navy-500);
  --accent-hover: var(--navy-600);
  --accent-press: var(--navy-700);
  --accent-soft:  var(--navy-50);
  --accent-fg:    #ffffff;

  --success:  var(--green-500);
  --warning:  var(--amber-500);
  --danger:   var(--red-500);

  /* ---------- Type families ---------- */
  --font-sans: "Manrope", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type scale (comfortable density) ---------- */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base:14px;
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 48px;

  /* ---------- Line heights ---------- */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  /* ---------- Letter spacing ---------- */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;     /* labels, eyebrows */
  --tracking-caps:   0.08em;     /* uppercase eyebrows */

  /* ---------- Weights ---------- */
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

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

  /* ---------- Radii ---------- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;     /* default for inputs, buttons */
  --radius-lg: 12px;    /* cards */
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ---------- Elevation (very restrained) ---------- */
  --shadow-xs: 0 1px 0 rgba(20, 23, 28, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 23, 28, 0.05), 0 1px 1px rgba(20, 23, 28, 0.03);
  --shadow-md: 0 2px 4px rgba(20, 23, 28, 0.06), 0 4px 12px rgba(20, 23, 28, 0.05);
  --shadow-lg: 0 4px 8px rgba(20, 23, 28, 0.06), 0 12px 32px rgba(20, 23, 28, 0.08);
  --shadow-focus: 0 0 0 3px rgba(31, 58, 95, 0.18);

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.2, 0, 0, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;

  /* ---------- Layout ---------- */
  --sidebar-w:        260px;
  --sidebar-w-rail:   60px;
  --header-h:         52px;
  --composer-h:       96px;
  --max-content:      1280px;
}

/* ============================================================
   Semantic / element styles
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size:   var(--text-base);
  line-height: var(--lh-normal);
  color:       var(--fg-1);
  background:  var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display + headings — sans, tight tracking, weight up */
.h-display {
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--w-semi);
  color: var(--fg-1);
}
h1, .h1 {
  font-size: var(--text-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--w-semi);
  color: var(--fg-1);
}
h2, .h2 {
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--w-semi);
  color: var(--fg-1);
}
h3, .h3 {
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
  font-weight: var(--w-semi);
  color: var(--fg-1);
}
h4, .h4 {
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  font-weight: var(--w-semi);
  color: var(--fg-1);
}

/* Body */
p, .p {
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.p-lg {
  font-size: var(--text-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

/* Small / meta */
.small {
  font-size: var(--text-sm);
  color: var(--fg-3);
}
.meta {
  font-size: var(--text-xs);
  color: var(--fg-3);
}

/* Eyebrow / label */
.eyebrow {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--w-medium);
  color: var(--fg-3);
}

/* Mono — citations, document IDs, time entries, numbers */
.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "ss02";
}
.tabular {
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; text-underline-offset: 2px; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
}

::selection { background: var(--navy-100); color: var(--navy-700); }