/* ============================================================
   Opstronic — Design Tokens
   Brand: trustworthy · precise · calm · quietly modern · premium
   Light theme only · Montserrat only · Navy as the action color
   ============================================================ */

/* Metrics-matched fallback for Montserrat — sizes the fallback's line
   box to match Montserrat's so text doesn't reflow when the webfont
   arrives (reduces CLS on slow connections). Values derived from
   @capsizecss/metrics (Montserrat Regular: unitsPerEm 1000, ascent 968,
   descent -251, lineGap 0, xWidthAvg 503 — Arial: unitsPerEm 2048,
   ascent 1854, descent -434, lineGap 67, xWidthAvg 913), using the
   standard size-adjust + rescaled ascent/descent/line-gap formula. */
@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial");
  size-adjust: 112.83%;
  ascent-override: 85.79%;
  descent-override: 22.25%;
  line-gap-override: 0%;
}

:root {
  /* ---- Brand (LOCKED) ---------------------------------- */
  --navy: #00163F;          /* brand / ink / dark — sidebar, headings, primary text, CTAs */
  --navy-hover: #0A2752;    /* primary button hover — navy lifted */
  --navy-active: #000E2B;   /* primary button active — deeper */
  --sand: #E9E1D2;          /* SECONDARY brand — warm partner to navy */
  --sand-deep: #DED3BF;     /* sand, one step down — quiet brand fills / borders */
  --app-bg: #F3EFE7;        /* page background — sand lightened, warm & airy */
  --surface: #F8F4EA;       /* card / panel surface — warm broken-white (off-white cream) */
  --surface-raised: #FCF9F1;/* topmost surfaces (popovers, modals) — lightest warm cream */

  /* ---- Derived neutrals (navy @ opacity — NOT new hues) - */
  --text-primary: #00163F;                  /* navy @ 100 */
  --text-secondary: rgba(0, 22, 63, 0.65);  /* body secondary */
  --text-tertiary: rgba(0, 22, 63, 0.62);   /* placeholder / hint */
  --border: rgba(0, 22, 63, 0.12);          /* hairline borders / dividers */
  --border-strong: rgba(0, 22, 63, 0.22);   /* input borders (slightly stronger) */
  --surface-hover: rgba(0, 22, 63, 0.05);   /* hover / selected row */
  --surface-sunken: rgba(0, 22, 63, 0.03);  /* subtle fills */

  /* ---- On-navy (sidebar) text ------------------------- */
  --on-navy: #F3EFE7;                  /* primary on navy @ 100 — warm off-white */
  --on-navy-muted: rgba(243, 239, 231, 0.70);
  --on-navy-faint: rgba(243, 239, 231, 0.58);
  --on-navy-surface: rgba(243, 239, 231, 0.08); /* active nav pill on navy */
  --on-navy-border: rgba(243, 239, 231, 0.14);

  /* ---- Functional status (the ONLY non-brand hues) ----- */
  --success: #2E7D5B;
  --warning: #B8862E;
  --danger:  #B23A3A;
  --info:    #2D5A8C;

  /* Darkened text variants for AA on tinted pills */
  --success-text: #1F6147;
  --warning-text: #876224;
  --danger-text:  #8F2E2E;
  --info-text:    #234A75;

  /* Tints (hue @ ~10% over white) for badge backgrounds */
  --success-tint: rgba(46, 125, 91, 0.11);
  --warning-tint: rgba(184, 134, 46, 0.13);
  --danger-tint:  rgba(178, 58, 58, 0.10);
  --info-tint:    rgba(45, 90, 140, 0.10);

  /* Lead temperature (maps onto semantic hues) */
  --hot:  var(--danger);
  --warm: var(--warning);
  --cold: var(--info);

  /* ---- Typography ------------------------------------- */
  --font: "Montserrat", "Montserrat Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: 28px;  --lh-h1: 36px;  --fw-h1: 700;
  --fs-h2: 20px;  --lh-h2: 28px;  --fw-h2: 600;
  --fs-h3: 16px;  --lh-h3: 24px;  --fw-h3: 600;
  --fs-body: 16px; --lh-body: 26px; --fw-body: 400;
  --fs-sm: 13px;  --lh-sm: 20px;  --fw-sm: 400;
  --fs-xs: 12px;  --lh-xs: 16px;  --fw-xs: 500;
  --fs-table: 13px; --lh-table: 20px;
  --fw-label: 500; /* labels / buttons / nav */

  /* ---- Spacing scale (4/8/12/16/24/32) ---------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- Radius ----------------------------------------- */
  --r-input: 10px;   /* inputs / buttons */
  --r-card: 14px;    /* cards */
  --r-card-lg: 16px;
  --r-pill: 999px;   /* badges */

  /* ---- Elevation (subtle, premium — no heavy shadows) - */
  --shadow-xs: 0 1px 2px rgba(0, 22, 63, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 22, 63, 0.07), 0 1px 2px rgba(0, 22, 63, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 22, 63, 0.08), 0 2px 4px rgba(0, 22, 63, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 22, 63, 0.12), 0 4px 8px rgba(0, 22, 63, 0.05);

  /* ---- Focus ring (visible, AA) ----------------------- */
  --focus-ring: 0 0 0 3px rgba(0, 22, 63, 0.18);
  --focus-ring-danger: 0 0 0 3px rgba(178, 58, 58, 0.18);
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--app-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Typography utilities
   ============================================================ */
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); letter-spacing: -0.01em; margin: 0; }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); letter-spacing: -0.005em; margin: 0; }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); margin: 0; }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; }
.t-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.t-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 500; }
.t-label { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: var(--fw-label); }
.t-secondary { color: var(--text-secondary); }
.t-tertiary { color: var(--text-tertiary); }
.t-eyebrow {
  font-size: 11px; line-height: 16px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-tertiary);
}

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: var(--sp-6); }

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.stat-card .stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-card .stat-label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); }
.stat-card .stat-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-hover); display: grid; place-items: center; color: var(--navy); }
.stat-card .stat-icon svg { width: 18px; height: 18px; }
.stat-card .stat-value { font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; }
.stat-card .stat-delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; }
.stat-card .stat-delta.up { color: var(--success-text); }
.stat-card .stat-delta.down { color: var(--danger-text); }
.stat-card .stat-delta svg { width: 13px; height: 13px; }

/* ============================================================
   Misc — spinners, dividers
   ============================================================ */
.divider { height: 1px; background: var(--border); border: none; margin: 0; }
.spinner { width: 20px; height: 20px; border-radius: 999px; border: 2px solid rgba(0,22,63,0.15); border-top-color: var(--navy); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, rgba(0,22,63,0.05) 25%, rgba(0,22,63,0.09) 37%, rgba(0,22,63,0.05) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 6px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }