/* ════════════════════════════════════════════════════════════════════════
   design.css — LogorhythmX app token system (D3, 2026-07-19)
   Rebuilt from scratch. THE PRODUCT LIVES IN CHARCOAL: the ivory marketing
   page (index.html, own token block) hands off to this dark, crafted app.
   Single source of truth for every app page — dashboard, leads, analytics,
   settings, support, admin, login. Pages remap their local body.client-ui
   variables onto these tokens; no raw hex belongs in page CSS.
   Type: Inter for all UI/data (500/600 headings, tabular-nums on numbers);
   Fraunces ONLY for each screen's page title and empty-state headings.
   No grain/texture in-app — data screens stay clean.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── SURFACES ── */
  --canvas:   #171512;              /* app background — dusk charcoal, never black */
  --surface:  #1E1B17;              /* cards, panels */
  --surface2: #26221C;              /* inputs, hovers, nested surfaces */
  --surface3: #2C2820;              /* deepest nesting: bars, wells, avatars */
  --nav-veil: rgba(23,21,18,0.86);  /* sticky topnav blur veil over canvas */

  /* ── INK ── */
  --ink:      #EDE7DB;              /* ~13.6:1 on canvas */
  --ink-soft: #A69D8C;              /* ~6.3:1 on canvas — labels, meta, muted */

  /* ── BRASS (accent discipline: hairlines, icons, kickers, active states,
        big numbers, primary-button fills — never body copy) ── */
  --brass:      #B48A4A;            /* ~5.1:1 on canvas — large text / icons */
  --brass-text: #C9A05C;            /* ~6.7:1 on canvas — small text safe */
  --brass-soft: rgba(180,138,74,0.14);
  --brass-ring: rgba(180,138,74,0.40);

  /* ── HAIRLINES ── */
  --hairline:   rgba(237,231,219,0.08);
  --hairline-2: rgba(237,231,219,0.17);

  /* ── SEMANTIC STATUS (desaturated for dark) ── */
  --positive: #7FA97A;              /* won / healthy */
  --negative: #C4756B;              /* lost / risk */
  --hot:      #C4756B;              /* serious — desaturated warm red */
  --warm:     #C9922E;              /* amber */
  --cold:     #8C96A0;              /* cool slate */
  --risk:     #C4756B;
  --olive:    #7FA97A;

  /* ── DATA VIZ — Chart.js reads these at init; no hex in chart JS.
        D8: brass leads the ramp — the D3 slate primary read as an
        off-brand blue on every bar chart. Slate is gone from the ramp
        (it remains ONLY as the semantic --cold status color). ── */
  --chart-1:    #B48A4A;            /* primary series — brass */
  --chart-2:    #C9A05C;            /* hover / secondary — brass-text */
  --chart-3:    #7FA97A;
  --chart-4:    #C4756B;
  --chart-5:    #8D8577;            /* muted comparison bars */
  --chart-grid: rgba(237,231,219,0.07);
  --chart-tick: #A69D8C;

  /* ── SHAPE ── */
  --radius-card: 12px;
  --radius-ctl:  8px;
  --radius-pill: 999px;

  /* ── MOTION (V1 rules) ── */
  --ease-out: cubic-bezier(0.22,1,0.36,1);
  --dur-fast: 200ms;
  --dur-base: 300ms;

  /* ── COMPAT ALIASES — older var names still referenced across the app.
        Everything routes to the tokens above; do not assign raw hex here. ── */
  --bg:          var(--canvas);
  --surface-2:   var(--surface2);
  --surface-3:   var(--surface3);
  --border:      var(--hairline);
  --border-2:    var(--hairline-2);
  --border-gold: var(--brass-ring);
  --text:        var(--ink);
  --muted:       var(--ink-soft);
  --muted2:      #6E675C;
  --text-muted:  var(--ink-soft);
  --gold:        var(--brass);
  --gold-dim:    var(--brass);
  --gold-text:   var(--brass-text);
  --gold-low:    var(--brass-soft);
  --gold-glow:   var(--brass-soft);
  --green:       var(--positive);
  --green-glow:  rgba(127,169,122,0.12);
  --red:         var(--negative);
  --red-glow:    rgba(196,117,107,0.15);
  --red-low:     rgba(196,117,107,0.10);
  --amber:       var(--warm);
  --blue:        var(--cold);
  --blue-dim:    var(--cold);
  --blue-glow:   rgba(140,150,160,0.12);
  --purple:      #9B8AA6;
  --sidebar:     var(--surface);
  --sidebar-w:   220px;
  --topbar-h:    52px;

  /* ── CLIENT BRANDING defaults (overridden at runtime by theme.js) ── */
  --client-primary:         var(--brass);
  --client-secondary:       var(--cold);
  --client-text-on-primary: #171512;
  --text-on-primary:        #171512;
}

/* ════════════════════════════════════════════════════════════════════════
   SHARED SHELL — base components written against the tokens. App pages may
   carry local copies of these classes (their inline styles win by cascade);
   both are var-driven, so they render identically. Pages without local
   copies (locked/placeholder pages, future screens) get the shell free.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Base ── */
.app-dark,
body.client-ui,
body.admin-ui {
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Numbers are data: always tabular. */
.stat-value, .temp-count, .conf-score, .row-score-num, .ring-num,
.forecast-value, .risk-total, .bcard-money, .tab-badge, .plan-price,
[data-count] { font-variant-numeric: tabular-nums; }

/* Fraunces is reserved for page titles + empty-state headings. */
.page-title, .greeting h1, .login-welcome, .empty-heading, .briefing-empty-head {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ── Topnav ── */
.topnav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  height: 60px; padding: 0 28px;
  background: var(--nav-veil);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.nav-brand-text { font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -0.3px; }
.nav-brand-text span { color: var(--brass-text); }
.nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--radius-ctl);
  font-size: 13.5px; font-weight: 500; color: var(--ink-soft);
  text-decoration: none; border: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav-link:hover { color: var(--ink); border-color: var(--hairline-2); }
.nav-link.active { color: var(--brass-text); background: var(--brass-soft); font-weight: 600; }
.nav-client-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.nav-client-sub  { font-size: 11px; color: var(--ink-soft); text-transform: capitalize; }
.nav-logout, .hamburger {
  background: transparent; border: 1px solid var(--hairline-2);
  border-radius: var(--radius-ctl); color: var(--ink-soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav-logout:hover, .hamburger:hover { color: var(--ink); border-color: var(--brass-ring); }

/* ── Drawer ── */
.drawer { background: var(--surface); border-left: 1px solid var(--hairline); }
.drawer-overlay { background: rgba(0,0,0,0.55); }

/* ── Page headers ── */
.section-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-soft);
}
.page-sub { color: var(--ink-soft); }

/* ── Cards ── */
.card, .stat-card, .chart-card, .lead-card, .briefing-card, .forecast-card,
.risk-card, .detail-card, .s-card, .billing-card, .m-card, .temp-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
}

/* ── Buttons ── */
.btn {
  background: var(--surface2); border: 1px solid var(--hairline-2);
  border-radius: var(--radius-ctl); color: var(--ink);
  font-family: inherit; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover { border-color: var(--brass-ring); color: var(--brass-text); }
.btn-primary, .btn-gold, .btn-copy, .btn-followup, .bcard-cta {
  background: var(--brass); border: none; color: var(--canvas);  /* ~7.9:1 */
  font-weight: 600; border-radius: var(--radius-ctl); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.btn-primary:hover, .btn-gold:hover, .btn-copy:hover, .btn-followup:hover, .bcard-cta:hover {
  background: var(--brass-text);
}

/* ── Badges / chips ── */
.temp-badge, .status-chip, .tier-badge {
  background: var(--surface2); color: var(--ink);
  border-radius: var(--radius-pill);
}
.st-qualified, .st-booked, .st-won { background: rgba(127,169,122,0.14); color: var(--positive); }
.st-nurture { background: rgba(140,150,160,0.14); color: var(--cold); }
.st-human_needed { background: rgba(201,146,46,0.15); color: var(--warm); }
.st-declined, .st-spam, .st-lost, .st-opted_out { background: var(--surface2); color: var(--ink-soft); }
.dot-hot { background: var(--hot); } .dot-warm { background: var(--warm); } .dot-cold { background: var(--cold); }

/* ── Inputs ── */
.field-input, .f-input, .search-input, .modal-msg-area {
  background: var(--surface2); border: 1px solid var(--hairline-2);
  border-radius: var(--radius-ctl); color: var(--ink); font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field-input:focus, .f-input:focus, .search-input:focus, .modal-msg-area:focus {
  border-color: var(--brass); outline: none;
}
::placeholder { color: var(--muted2); }

/* Visible brass focus for keyboard users, everywhere. */
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ── Modals ── */
.modal, .upgrade-modal, .import-modal {
  background: var(--surface); border: 1px solid var(--hairline-2);
  border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,0.5);
}
.modal-overlay, .upgrade-modal-overlay, .import-overlay { background: rgba(0,0,0,0.6); }

/* ── Empty states ── */
.empty-state i, .empty i { color: var(--muted2); }
.empty-heading { color: var(--ink); }
.empty-sub, .empty-note { color: var(--ink-soft); }

/* ── Toast ── */
.toast {
  background: var(--surface2); border: 1px solid var(--hairline-2);
  border-left: 3px solid var(--brass); border-radius: 10px;
  color: var(--ink); box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}
.toast i { color: var(--brass-text); }

/* ── Skeleton ── */
@keyframes shimmer-dark { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton, .ig-skel {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
  background-size: 800px 100%;
  animation: shimmer-dark 1.3s infinite;
  border-radius: var(--radius-ctl);
}

/* ── Scrollbars (WebKit) — quiet, canvas-matched ── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 5px; border: 2px solid var(--canvas); }
::-webkit-scrollbar-thumb:hover { background: var(--muted2); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .skeleton, .ig-skel { animation: none; }
  * { transition-duration: 0.01ms !important; }
}