/* MRMS 2.0 - "Bench & Ledger" design tokens. Load after bootstrap.min.css, before app.css. */

/* ---------- Fonts (self-hosted, Latin subset) ---------- */
@font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }

:root,
[data-bs-theme="light"] {
  /* Brand */
  --brand-navy: #0B2545;
  --brand-navy-700: #1D3F6E;
  --brand-gold: #C9A227;         /* accents only, never body text on white */
  --brand-gold-ink: #8A6D12;     /* gold used as text */
  --action: #1B7F3B;
  --action-hover: #156530;

  /* Surfaces and text */
  --canvas: #F4F6F9;
  --surface: #FFFFFF;
  --surface-2: #F9FAFB;
  --line: #E3E7ED;
  --ink: #101828;
  --ink-2: #475467;
  --ink-3: #667085;

  /* Status (strong / soft) */
  --success: #1B7F3B; --success-soft: #E7F4EC;
  --warning: #B26B00; --warning-soft: #FFF4E0;
  --danger:  #B42318; --danger-soft:  #FDECEA;
  --info:    #175CD3; --info-soft:    #EAF1FD;
  --neutral: #475467; --neutral-soft: #EEF1F5;

  /* Type */
  --font-sans: "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --fs-display: 2rem;     --lh-display: 2.5rem;
  --fs-h1: 1.625rem;      --lh-h1: 2.125rem;
  --fs-h2: 1.125rem;      --lh-h2: 1.625rem;
  --fs-h3: 0.9375rem;     --lh-h3: 1.375rem;
  --fs-body: 0.9375rem;   --lh-body: 1.5rem;
  --fs-table: 0.875rem;   --lh-table: 1.25rem;
  --fs-small: 0.8125rem;  --lh-small: 1.125rem;
  --fs-label: 0.75rem;    --ls-label: 0.06em;
  --fs-kpi: 1.875rem;     --lh-kpi: 2.25rem;

  /* Space (4-point) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px;

  /* Shape, depth, motion */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 999px;
  --e-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --e-2: 0 6px 16px rgba(16, 24, 40, .10);
  --e-3: 0 16px 40px rgba(16, 24, 40, .18);
  --t-fast: 120ms; --t-base: 200ms; --t-slow: 280ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Layout */
  --sidebar-w: 264px; --sidebar-rail-w: 72px; --topbar-h: 64px;
  --content-max: 1280px; --form-max: 760px;
  --viewer-stage: #3B4252;

  /* Bootstrap mapping */
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--fs-body);
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--canvas);
  --bs-secondary-color: var(--ink-2);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--r-md);
  --bs-border-radius-sm: var(--r-sm);
  --bs-border-radius-lg: var(--r-lg);
  --bs-primary: var(--action);
  --bs-primary-rgb: 27, 127, 59;
  --bs-success: var(--success);
  --bs-warning: var(--warning);
  --bs-danger: var(--danger);
  --bs-info: var(--info);
  --bs-link-color: var(--action);
  --bs-link-color-rgb: 27, 127, 59;
  --bs-link-hover-color: var(--action-hover);
  --bs-link-hover-color-rgb: 21, 101, 48;
  --bs-focus-ring-color: rgba(201, 162, 39, .55);
  --bs-emphasis-color: var(--ink);
  --bs-tertiary-bg: var(--surface-2);
  --bs-secondary-bg: var(--neutral-soft);
}

[data-bs-theme="dark"] {
  --brand-navy: #0A1A30;
  --brand-navy-700: #1A3358;
  --brand-gold: #D8B54A;
  --brand-gold-ink: #E2C36A;
  --action: #3BAA5F;
  --action-hover: #52BC74;

  --canvas: #0B1220;
  --surface: #111A2B;
  --surface-2: #16213A;
  --line: #24324D;
  --ink: #E7ECF3;
  --ink-2: #A3B0C2;
  --ink-3: #7D8BA1;

  --success: #3BAA5F; --success-soft: #12301F;
  --warning: #F0A43A; --warning-soft: #33250D;
  --danger:  #F2675C; --danger-soft:  #3A1714;
  --info:    #6AA1F5; --info-soft:    #12233F;
  --neutral: #A3B0C2; --neutral-soft: #1C2740;

  --e-1: 0 0 0 1px var(--line);
  --e-2: 0 6px 16px rgba(0, 0, 0, .40);
  --e-3: 0 16px 40px rgba(0, 0, 0, .55);

  --bs-body-color: var(--ink);
  --bs-body-bg: var(--canvas);
  --bs-secondary-color: var(--ink-2);
  --bs-border-color: var(--line);
  --bs-primary: var(--action);
  --bs-primary-rgb: 59, 170, 95;
  --bs-link-color: var(--action);
  --bs-link-color-rgb: 59, 170, 95;
  --bs-link-hover-color: var(--action-hover);
  --bs-link-hover-color-rgb: 82, 188, 116;
  --bs-emphasis-color: var(--ink);
  --bs-tertiary-bg: var(--surface-2);
  --bs-secondary-bg: var(--neutral-soft);
}

/* Base */
body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
h1, .h1 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2, .h2 { font-weight: 600; font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3, .h3 { font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.num, td.num, .kpi__value { font-variant-numeric: tabular-nums; }
.mono, .folder-name { font-family: var(--font-mono); font-size: .8125rem; }
.overline { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 600; color: var(--ink-2); }
:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }

/* Status pills */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px;
  border-radius: var(--r-full); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.pill--success { background: var(--success-soft); color: var(--success); }
.pill--warning { background: var(--warning-soft); color: var(--warning); }
.pill--danger  { background: var(--danger-soft);  color: var(--danger); }
.pill--info    { background: var(--info-soft);    color: var(--info); }
.pill--neutral { background: var(--neutral-soft); color: var(--neutral); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}