/* ============================================================
   Meridian CRM — base.css
   Design tokens, themes, reset, typography, shared utilities.
   ============================================================ */

:root {
  /* Brand + semantic color system (light) */
  --brand: #4663ea;
  --brand-strong: #3a52d8;
  --brand-soft: rgba(79, 107, 240, 0.12);
  --brand-softer: rgba(79, 107, 240, 0.07);
  --success: #1f9d61;
  --success-soft: rgba(31, 157, 97, 0.14);
  --warning: #c07c0a;
  --warning-soft: rgba(192, 124, 10, 0.15);
  --danger: #d5433c;
  --danger-soft: rgba(213, 67, 60, 0.13);
  --info: #2f7fd1;
  --info-soft: rgba(47, 127, 209, 0.13);
  --neutral: #64748b;
  --neutral-soft: rgba(100, 116, 139, 0.14);

  /* Surfaces */
  --bg: #f1f4f9;
  --bg-deep: #e9edf4;
  --surface: #ffffff;
  --surface-alt: #f7f9fc;
  --surface-sunken: #eef1f7;
  --elevated: #ffffff;
  --border: #d9dfe9;
  --border-strong: #c3ccdb;
  --hover-layer: rgba(15, 23, 42, 0.045);
  --active-layer: rgba(15, 23, 42, 0.08);
  --selected-layer: rgba(79, 107, 240, 0.09);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08), 0 1px 1px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 18px 50px rgba(15, 23, 42, 0.22), 0 6px 14px rgba(15, 23, 42, 0.1);

  /* Text */
  --text: #1a2334;
  --text-soft: #46536b;
  --text-muted: #5e6b83;
  --text-faint: #8791a6;
  --text-on-brand: #ffffff;

  /* Object identity colors */
  --obj-account: #2f7fd1;
  --obj-contact: #0ea5a5;
  --obj-lead: #e8892b;
  --obj-opportunity: #26a269;
  --obj-case: #e0563f;
  --obj-task: #8461e8;
  --obj-event: #0f8f7a;
  --obj-call: #5f7391;
  --obj-email: #4f6bf0;
  --obj-note: #b08968;
  --obj-report: #c2489c;
  --obj-user: #8a94a6;

  /* Stage semantic anchors (full ramp lives on .stage-c-* classes) */
  --stage-won: #26a269;
  --stage-lost: #94a3b8;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px;

  /* Spacing rhythm (4px grid) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* Shape */
  --r-sm: 4px; --r-md: 6px; --r-lg: 9px; --r-xl: 14px; --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);
  --t-fast: 110ms; --t-med: 180ms; --t-slow: 280ms;

  /* Layout metrics */
  --topbar-h: 52px;
  --tabbar-h: 44px;
  --row-h: 40px;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);

  --chart-grid: rgba(15, 23, 42, 0.07);
  --chart-label: var(--text-muted);
  --scrim: rgba(9, 14, 25, 0.45);
}

html[data-density="compact"] { --row-h: 32px; }

html[data-theme="dark"] {
  --brand: #7d93ff;
  --brand-strong: #9aabff;
  --brand-soft: rgba(125, 147, 255, 0.16);
  --brand-softer: rgba(125, 147, 255, 0.09);
  --success: #3ecf8e;
  --success-soft: rgba(62, 207, 142, 0.16);
  --warning: #e8a33d;
  --warning-soft: rgba(232, 163, 61, 0.16);
  --danger: #f0655e;
  --danger-soft: rgba(240, 101, 94, 0.16);
  --info: #61a8f0;
  --info-soft: rgba(97, 168, 240, 0.15);
  --neutral: #94a3b8;
  --neutral-soft: rgba(148, 163, 184, 0.16);

  --bg: #0f131b;
  --bg-deep: #0b0e14;
  --surface: #171c26;
  --surface-alt: #1b212d;
  --surface-sunken: #131822;
  --elevated: #1d2430;
  --border: #2b3342;
  --border-strong: #3a4455;
  --hover-layer: rgba(148, 163, 184, 0.08);
  --active-layer: rgba(148, 163, 184, 0.14);
  --selected-layer: rgba(125, 147, 255, 0.14);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 5px 16px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 55px rgba(0, 0, 0, 0.65);

  --text: #e8edf6;
  --text-soft: #c3ccdc;
  --text-muted: #94a0b6;
  --text-faint: #66718a;

  --obj-account: #5ea3e8;
  --obj-contact: #2fc4c4;
  --obj-lead: #f0a35a;
  --obj-opportunity: #43c587;
  --obj-case: #f0786a;
  --obj-task: #a78bfa;
  --obj-event: #37b89f;
  --obj-call: #8b9cb8;
  --obj-email: #8fa1ff;
  --obj-note: #cba37e;
  --obj-report: #e372c0;
  --obj-user: #9aa5b8;

  --stage-1: #74809a; --stage-2: #8fa3f7; --stage-3: #7ba1f0;
  --stage-4: #52c28d; --stage-won: #43c587; --stage-lost: #74809a;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
  --chart-grid: rgba(148, 163, 184, 0.1);
  --scrim: rgba(4, 7, 13, 0.62);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: inline-block; vertical-align: middle; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
::selection { background: var(--brand-soft); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Type ---------- */
.t-h1 { font-size: var(--fs-24); font-weight: 700; letter-spacing: -0.02em; }
.t-h2 { font-size: var(--fs-18); font-weight: 700; letter-spacing: -0.01em; }
.t-h3 { font-size: var(--fs-16); font-weight: 650; }
.t-h4 { font-size: var(--fs-13); font-weight: 650; }
.t-meta { font-size: var(--fs-12); color: var(--text-muted); }
.t-faint { color: var(--text-faint); }
.t-soft { color: var(--text-soft); }
.t-muted { color: var(--text-muted); }
.t-mono { font-family: var(--font-mono); font-size: 0.92em; }
.t-num { font-variant-numeric: tabular-nums; }
.t-right { text-align: right; }
.t-center { text-align: center; }
.t-nowrap { white-space: nowrap; }
.t-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-label { font-size: var(--fs-11); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.t-danger { color: var(--danger); }
.t-success { color: var(--success); }
.t-warning { color: var(--warning); }
.t-strong { font-weight: 650; }
.t-strike { text-decoration: line-through; color: var(--text-faint); }

/* ---------- Layout utilities ---------- */
.row { display: flex; align-items: center; gap: var(--sp-2); }
.row-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.col { display: flex; flex-direction: column; gap: var(--sp-2); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.grow { flex: 1 1 auto; min-width: 0; }
.shrink0 { flex-shrink: 0; }
.hide { display: none !important; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }
.p-2 { padding: var(--sp-2); } .p-3 { padding: var(--sp-3); } .p-4 { padding: var(--sp-4); } .p-6 { padding: var(--sp-6); }
.pos-rel { position: relative; }

/* ---------- Card / panel ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  min-height: 46px;
}
.card-title { font-size: var(--fs-14); font-weight: 650; display: flex; align-items: center; gap: var(--sp-2); }

/* ---------- Tooltips (CSS-driven) ---------- */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 50%; bottom: calc(100% + 7px);
  transform: translateX(-50%) translateY(2px);
  background: var(--text); color: var(--surface);
  font-size: var(--fs-11); font-weight: 500; line-height: 1.35;
  padding: 5px 8px; border-radius: var(--r-sm);
  white-space: pre-line; max-width: 300px; width: max-content;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  z-index: 2600;
  box-shadow: var(--shadow-md);
}
[data-tip]::before {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 3px);
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--text);
  opacity: 0; pointer-events: none; transition: opacity var(--t-fast) var(--ease); z-index: 2600;
}
[data-tip]:hover::after, [data-tip]:hover::before,
[data-tip]:focus-visible::after, [data-tip]:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 7px); }
[data-tip-pos="bottom"]::before { bottom: auto; top: calc(100% + 3px); border-top-color: transparent; border-bottom-color: var(--text); }

/* ---------- Skeleton shimmer ---------- */
.skel {
  background: linear-gradient(100deg, var(--surface-sunken) 40%, var(--surface-alt) 50%, var(--surface-sunken) 60%);
  background-size: 220% 100%;
  animation: skel 1.15s linear infinite;
  border-radius: var(--r-sm);
  min-height: 12px;
}
@keyframes skel { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.skel-line { height: 12px; margin: 7px 0; }
.skel-line.w-60 { width: 60%; } .skel-line.w-80 { width: 80%; } .skel-line.w-40 { width: 40%; } .skel-line.w-30 { width: 30%; }

/* ---------- Boot splash ---------- */
.boot-splash {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4);
  background: var(--bg);
}
.boot-bar { width: 140px; height: 3px; border-radius: 2px; background: var(--surface-sunken); overflow: hidden; }
.boot-bar-fill { display: block; height: 100%; width: 40%; border-radius: 2px; background: var(--brand); animation: bootslide 0.9s var(--ease-in-out) infinite; }
@keyframes bootslide { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }
.boot-note { font-size: var(--fs-12); color: var(--text-muted); }
.boot-splash.fade-out { transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow); opacity: 0; visibility: hidden; }

/* ---------- Keyboard hint ---------- */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-family: var(--font-sans); font-size: var(--fs-11); font-weight: 600;
  color: var(--text-soft);
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print ---------- */
@media print {
  .topbar, .tabbar, .utility-bar, #toast-root { display: none !important; }
  body { background: #fff; }
}