/* ============================================================
   Leap Design System — "Midnight Executive" (ported to Metrics)
   LAYER 1 — LIVE. The app shells carry `.ds` (+ `.ds-data`) and the
   default theme is light; the legacy bridge below carries existing
   style.css, which is now tokenized against --ds-*. Dark remains a
   working peer via [data-theme="dark"].

   Canonical source: GO's frontend/src/design/midnight.css. The
   --ds-* palette below is ported VERBATIM from GO (light + dark),
   plus one Metrics-only addition (--ds-ember, for chart series so
   "Failed" doesn't collide with "Fraud") and --ds-ease.

   Adoption is opt-in and reversible: semantic tokens live on `.ds`;
   a subtree opts in by adding the class. A legacy bridge (bottom of
   the `.ds` block) aliases Metrics' existing style.css token names
   (--primary, --bg, --text-1, --r-sm, …) onto --ds-* so not-yet-
   migrated CSS keeps rendering correctly inside a migrated subtree.
   New code should use the --ds-* names directly; the bridge is a
   migration aid, not the API.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

.ds {
  /* ---- palette (semantic) — ported verbatim from GO ---- */
  --ds-paper: #f6f4ef;          /* app background */
  --ds-surface: #ffffff;        /* cards */
  --ds-surface-2: #faf9f6;      /* subtle fills, table heads */
  --ds-line: #e4e2db;           /* hairline border */
  --ds-line-soft: #eceae4;

  --ds-ink: #1a2740;            /* primary text */
  --ds-ink-2: #5a6b86;          /* secondary */
  --ds-ink-3: #647186;          /* muted / meta — darkened from #8593ab for WCAG AA (4.5:1) on paper/surface/surface-2 */

  --ds-navy: #152138;           /* banners, objective cards */
  --ds-navy-2: #1d2d4d;

  --ds-accent: #1f8a77;         /* teal — primary accent (replaces old green) */
  --ds-accent-soft: #e7f3f0;
  --ds-accent-ink: #15705f;

  --ds-gold: #cf9b3f;           /* eyebrow / caution / scheduled */
  --ds-gold-soft: #f8efdb;
  --ds-gold-ink: #9a6f1d;

  --ds-blue: #3d6fd6;
  --ds-blue-soft: #e9f0fc;
  --ds-blue-ink: #2b54a8;

  --ds-rose: #c2455f;           /* alert / negative */
  --ds-rose-soft: #fbe9ed;
  --ds-rose-ink: #b3284a;

  --ds-stone-soft: #e6e4dd;     /* neutral chip */
  --ds-stone-ink: #5c5848;

  /* ---- Metrics-only addition: ember ----
     A distinct warm orange for chart series so "Failed" (ember) does
     not collide with "Fraud" (rose). Not present in GO. */
  --ds-ember: #c4652c;
  --ds-ember-soft: #fbeade;
  --ds-ember-ink: #8f461c;

  /* ---- status semantics (from GO) ---- */
  --ds-status-sent: var(--ds-accent);
  --ds-status-scheduled: var(--ds-gold);
  --ds-status-awaiting: var(--ds-rose);
  --ds-status-auto: var(--ds-ink-3);
  --ds-status-positive: var(--ds-accent);

  /* ---- typography ---- */
  --ds-font-display: 'Fraunces', Georgia, serif;
  --ds-font-body: 'Inter', system-ui, sans-serif;
  --ds-font-mono: 'IBM Plex Mono', monospace;

  /* ---- shape ---- */
  --ds-radius: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-sm: 8px;
  --ds-shadow: 0 1px 3px rgba(21, 33, 56, .06), 0 8px 30px rgba(21, 33, 56, .07);
  --ds-shadow-sm: 0 2px 8px rgba(21, 33, 56, .05);
  --ds-gap: 14px;

  /* sidebar surface — a touch darker than --ds-paper so the nav reads
     as a distinct panel (paired with a right hairline border).
     Nudged lighter from #ece7dd so --ds-ink-2 sidebar text clears WCAG AA (4.5:1). */
  --ds-nav-bg: #f3eee4;

  /* ---- motion (Metrics addition; matches the legacy --ease curve) ---- */
  --ds-ease: cubic-bezier(.25,.8,.25,1);

  color-scheme: light;

  /* ============================================================
     LEGACY BRIDGE — Metrics' style.css token names → --ds-*
     Active only inside `.ds`. Lets existing components (which use
     var(--primary)/var(--surface)/… ) render in Midnight tokens
     within a migrated subtree, without touching style.css.
     ============================================================ */
  --font: var(--ds-font-body);

  --primary:     var(--ds-accent);
  --primary-dim: var(--ds-accent-soft);
  --green:       var(--ds-accent);
  --amber:       var(--ds-gold);
  --red:         var(--ds-rose);

  --bg:        var(--ds-paper);
  --surface:   var(--ds-surface);
  --surface-2: var(--ds-surface-2);
  --border:    var(--ds-line);

  --text-1: var(--ds-ink);
  --text-2: var(--ds-ink-2);
  --text-3: var(--ds-ink-3);

  --topbar-bg:   var(--ds-nav-bg);   /* NOTE: Metrics' nav is dark in both themes today; --ds-nav-bg is light in light. Later layers reconcile. */
  --topbar-text: var(--ds-ink-3);    /* no exact GO equivalent — nearest muted ink */

  --shadow-sm: var(--ds-shadow-sm);
  --shadow-md: var(--ds-shadow);
  --shadow-lg: var(--ds-shadow);     /* GO has no -lg shadow tier — aliased to --ds-shadow */

  --r-sm: var(--ds-radius-sm);
  --r-md: var(--ds-radius);
  --r-lg: var(--ds-radius-lg);       /* Metrics --r-lg was 18px; GO --ds-radius-lg is 16px */

  --ease: var(--ds-ease);
  /* NOT bridged (no --ds-* equivalent — remain Metrics-local layout tokens,
     still resolved via :root inheritance inside .ds):
       --sidebar-w, --sidebar-w-sm, --mobile-bar-h */

  background: var(--ds-paper);
  color: var(--ds-ink);
  font-family: var(--ds-font-body);
}

/* ============================================================
   Midnight Executive — DARK theme
   Only the raw --ds-* palette is overridden; the legacy bridge and
   every component reference --ds-*, so they follow automatically.
   Activated by data-theme="dark" on an ancestor of `.ds`.
   ============================================================ */
[data-theme="dark"] .ds {
  --ds-paper: #0e1626;
  --ds-surface: #172238;
  --ds-surface-2: #1d2a44;
  --ds-line: #2a3a57;
  --ds-line-soft: #223149;

  --ds-ink: #eaf0fa;
  --ds-ink-2: #aab8d0;
  --ds-ink-3: #8496b3;          /* lightened from #7385a3 for WCAG AA (4.5:1) on dark surfaces incl surface-2 */

  --ds-navy: #1d2d4d;
  --ds-navy-2: #24365c;

  --ds-accent: #25a589; --ds-accent-soft: rgba(37, 165, 137, .18); --ds-accent-ink: #83e6c4;
  --ds-gold: #d6a94e; --ds-gold-soft: rgba(207, 155, 63, .16); --ds-gold-ink: #f0cd83;
  --ds-blue: #5b8cff; --ds-blue-soft: rgba(91, 140, 255, .16); --ds-blue-ink: #bcd0ff;
  --ds-rose: #d65b73; --ds-rose-soft: rgba(194, 69, 95, .20); --ds-rose-ink: #f2a8b6;
  --ds-stone-soft: rgba(133, 147, 171, .14); --ds-stone-ink: #aab8d0;

  /* Metrics-only ember (dark) */
  --ds-ember: #e08344; --ds-ember-soft: rgba(196, 101, 44, .18); --ds-ember-ink: #f0b48a;

  --ds-nav-bg: #0a111f;
  --ds-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 8px 30px rgba(0, 0, 0, .45);
  --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* ============================================================
   DENSITY MODES — define only; not applied in Layer 0.
   Components in later layers read these --ds-density-* tokens.
   Metrics pages will use .ds-data (dashboards/tables/charts);
   partner-facing / report surfaces may use .ds-editorial.
   ============================================================ */
.ds-editorial {
  --ds-card-pad: 24px;   /* 20–28px */
  --ds-grid-gap: 20px;   /* 16–24px */
  --ds-row-pad: 14px;    /* 12–16px */
  line-height: 1.55;
}
.ds-data {
  --ds-card-pad: 18px;   /* 16–20px */
  --ds-grid-gap: 14px;   /* 12–16px */
  --ds-row-pad: 9px;     /* 8–10px */
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}


/* ── Accessibility: honor reduced-motion (Layer 1) ─────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}