/* ============================================================
   tokens.css — OneCliq shared design system (2026-09-24 refresh)
   Loaded by BOTH surfaces after styles.css (index.html + console.html), so these
   tokens win. Console-only and mobile-only styling stays in console.css / styles.css;
   anything both surfaces share (colour, type, motion, charts, chips, skeletons,
   empty states, toasts, sheets) lives here.
   ============================================================ */

:root {
  /* --- Brand (from the OneCliq mark: deep blue #3368A0 → teal #66A3BF → mint #C8DFDB) --- */
  --brand-50:  #eef4ff;
  --brand-100: #dbe7ff;
  --brand-200: #bcd2ff;
  --brand-300: #8fb3fb;
  --brand-400: #5b8def;
  --brand-500: #2f6fed;
  --brand-600: #1f57d0;
  --brand-700: #1a46a8;
  --brand-800: #183a85;
  --brand-900: #152f66;
  --teal-400:  #4fb3c8;
  --mint-200:  #c8dfdb;
  --brand-grad: linear-gradient(135deg, #2f6fed 0%, #3a8fd6 55%, #4fb3c8 100%);
  --brand-grad-soft: linear-gradient(135deg, rgba(47,111,237,.10), rgba(79,179,200,.10));

  /* --- Neutrals (cool slate) --- */
  --bg:            #f5f7fb;
  --surface:       #ffffff;
  --surface-2:     #f1f4f9;
  --surface-3:     #e6ebf3;
  --border:        #e3e8f0;
  --border-strong: #ccd5e2;
  --text:          #0d1526;
  --text-2:        #475569;
  --text-3:        #5f6b7e;   /* B16: was #7a869a (3.7:1) */
  --overlay:       rgba(13, 21, 38, .42);

  --primary:      var(--brand-500);
  --primary-600:  var(--brand-600);
  --primary-tint: var(--brand-50);
  --accent:       var(--brand-400);
  --accent-tint:  var(--brand-50);
  --focus-ring:   0 0 0 3px rgba(47,111,237,.22);

  /* --- Semantic --- */
  --success: #12a150; --success-tint: #e3f7ec;
  --warning: #d98a04; --warning-tint: #fff4dc;
  --danger:  #e5484d; --danger-tint:  #feeced;
  --info:    #0ea5e9; --info-tint:    #e3f5fd;

  /* --- Pipeline stages (one vocabulary, both surfaces) --- */
  --st-new:       #64748b; --st-new-tint:       #eef2f7;
  --st-contacted: #0ea5e9; --st-contacted-tint: #e3f5fd;
  --st-demo:      #7c3aed; --st-demo-tint:      #f1eafe;
  --st-trial:     #0e9384; --st-trial-tint:     #def7f3;
  --st-quoted:    #d98a04; --st-quoted-tint:    #fff4dc;
  --st-won:       #12a150; --st-won-tint:       #e3f7ec;
  --st-lost:      #e5484d; --st-lost-tint:      #feeced;

  /* --- Temperature tag --- */
  --t-hot:  #ef4444; --t-hot-tint:  #fdecec;
  --t-warm: #f59e0b; --t-warm-tint: #fff4dc;
  --t-cold: #38bdf8; --t-cold-tint: #e5f6fe;

  /* legacy aliases used by existing CSS */
  --hot: var(--t-hot); --hot-tint: var(--t-hot-tint);
  --warm: var(--t-warm); --warm-tint: var(--t-warm-tint);
  --cold: var(--st-new); --cold-tint: var(--st-new-tint);
  --new: var(--brand-500); --new-tint: var(--brand-50);
  --won: var(--success); --won-tint: var(--success-tint);

  /* B16: text in these colours (pills, chips, monograms) uses the darker ink so it reads at AA on
     its tint in light mode; dark mode keeps the bright colours. */
  --st-new-ink: #475569; --st-contacted-ink: #0369a1; --st-demo-ink: #6d28d9; --st-trial-ink: #0f766e;
  --st-quoted-ink: #a16207; --st-won-ink: #15803d; --st-lost-ink: #c62828;
  --t-hot-ink: #c81e1e; --t-warm-ink: #b45309; --t-cold-ink: #0369a1;
  --hot-ink: var(--t-hot-ink); --warm-ink: var(--t-warm-ink); --cold-ink: var(--st-new-ink);

  /* --- Chart palette (categorical, colour-blind aware order) --- */
  --c1: #2f6fed; --c2: #4fb3c8; --c3: #7c3aed; --c4: #f59e0b; --c5: #12a150; --c6: #e5484d;

  /* --- Type --- */
  --font: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 32px;

  /* --- Shape + depth --- */
  --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(13,21,38,.05);
  --shadow-sm: 0 1px 3px rgba(13,21,38,.06), 0 1px 2px rgba(13,21,38,.04);
  --shadow-md: 0 6px 18px -6px rgba(13,21,38,.12), 0 2px 6px -2px rgba(13,21,38,.06);
  --shadow-lg: 0 18px 44px -12px rgba(13,21,38,.22), 0 6px 16px -8px rgba(13,21,38,.10);
  --shadow-brand: 0 10px 24px -10px rgba(47,111,237,.55);

  /* --- Motion --- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.2, 1.1, .3, 1.05);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 520ms;
}

/* ---------- Dark ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1120; --surface: #121a2c; --surface-2: #19233a; --surface-3: #232f4a;
    --border: #243049; --border-strong: #34425f;
    --text: #edf2fb; --text-2: #a9b4cc; --text-3: #6f7c99; --overlay: rgba(0,0,0,.6);
    --primary: #5b8dff; --primary-600: #3f76f5; --primary-tint: #16233f; --accent: #5b8dff; --accent-tint: #16233f;
    --brand-50: #16233f; --brand-100: #1b2c50;
    --success-tint: #0f2e20; --warning-tint: #33270c; --danger-tint: #3a1719; --info-tint: #0e2a3a;
    --st-new-tint: #1c2537; --st-contacted-tint: #0e2a3a; --st-demo-tint: #251a44; --st-quoted-tint: #33270c; --st-trial-tint: #0c2e2a; --st-won-tint: #0f2e20; --st-lost-tint: #3a1719;
    --t-hot-tint: #3a1719; --t-warm-tint: #33270c; --t-cold-tint: #0e2a3a;
    --st-new-ink: var(--st-new); --st-contacted-ink: var(--st-contacted); --st-demo-ink: var(--st-demo); --st-trial-ink: var(--st-trial); --st-quoted-ink: var(--st-quoted); --st-won-ink: var(--st-won); --st-lost-ink: var(--st-lost); --t-hot-ink: var(--t-hot); --t-warm-ink: var(--t-warm); --t-cold-ink: var(--t-cold);
    --shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
    --shadow-md: 0 6px 18px -6px rgba(0,0,0,.6); --shadow-lg: 0 18px 44px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --bg: #0b1120; --surface: #121a2c; --surface-2: #19233a; --surface-3: #232f4a;
  --border: #243049; --border-strong: #34425f;
  --text: #edf2fb; --text-2: #a9b4cc; --text-3: #6f7c99; --overlay: rgba(0,0,0,.6);
  --primary: #5b8dff; --primary-600: #3f76f5; --primary-tint: #16233f; --accent: #5b8dff; --accent-tint: #16233f;
  --brand-50: #16233f; --brand-100: #1b2c50;
  --success-tint: #0f2e20; --warning-tint: #33270c; --danger-tint: #3a1719; --info-tint: #0e2a3a;
  --st-new-tint: #1c2537; --st-contacted-tint: #0e2a3a; --st-demo-tint: #251a44; --st-quoted-tint: #33270c; --st-trial-tint: #0c2e2a; --st-won-tint: #0f2e20; --st-lost-tint: #3a1719;
  --t-hot-tint: #3a1719; --t-warm-tint: #33270c; --t-cold-tint: #0e2a3a;
  --st-new-ink: var(--st-new); --st-contacted-ink: var(--st-contacted); --st-demo-ink: var(--st-demo); --st-trial-ink: var(--st-trial); --st-quoted-ink: var(--st-quoted); --st-won-ink: var(--st-won); --st-lost-ink: var(--st-lost); --t-hot-ink: var(--t-hot); --t-warm-ink: var(--t-warm); --t-cold-ink: var(--t-cold);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 1px 3px rgba(0,0,0,.45);
  --shadow-md: 0 6px 18px -6px rgba(0,0,0,.6); --shadow-lg: 0 18px 44px -12px rgba(0,0,0,.7);
}

body { font-family: var(--font); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
.num, .tnum { font-variant-numeric: tabular-nums; }

/* ============================================================
   Motion primitives
   ============================================================ */
@keyframes ui-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-scale-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ui-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ui-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes ui-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ui-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ui-draw { from { stroke-dashoffset: var(--len, 1000); } to { stroke-dashoffset: 0; } }
@keyframes ui-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(47,111,237,.35); } 50% { box-shadow: 0 0 0 6px rgba(47,111,237,0); } }
@keyframes ui-pop { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }

.ui-enter { animation: ui-fade-up var(--dur-3) var(--ease-out) both; }
.ui-stagger > * { animation: ui-fade-up var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }

.ui-press { transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2); }
.ui-press:active { transform: scale(.97); }



/* ============================================================
   Skeletons (replace "Loading…" text)
   ============================================================ */
.skel { position: relative; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2);
  background-image: linear-gradient(90deg, var(--surface-2) 0, var(--surface-3) 40px, var(--surface-2) 80px);
  background-size: 800px 100%; animation: ui-shimmer 1.3s linear infinite; }
.skel-line { height: 12px; margin: 8px 0; }
.skel-title { height: 20px; width: 40%; margin: 6px 0 14px; }
.skel-card { height: 92px; border-radius: var(--r-lg); }
.skel-row { height: 52px; border-radius: var(--r-md); margin-bottom: 8px; }
.skel-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* ============================================================
   Chips / pills
   ============================================================ */
.ui-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 650; line-height: 18px; white-space: nowrap; border: 1px solid transparent; }
.ui-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stage-pill[data-stage="new"]       { color: var(--st-new-ink);       background: var(--st-new-tint); }
.stage-pill[data-stage="contacted"] { color: var(--st-contacted-ink); background: var(--st-contacted-tint); }
.stage-pill[data-stage="demo"]      { color: var(--st-demo-ink);      background: var(--st-demo-tint); }
.stage-pill[data-stage="trial"]     { color: var(--st-trial-ink);     background: var(--st-trial-tint); }
.stage-pill[data-stage="quoted"]    { color: var(--st-quoted-ink);    background: var(--st-quoted-tint); }
.stage-pill[data-stage="won"]       { color: var(--st-won-ink);       background: var(--st-won-tint); }
.stage-pill[data-stage="lost"]      { color: var(--st-lost-ink);      background: var(--st-lost-tint); }
.temp-chip[data-temp="hot"]  { color: var(--t-hot-ink);  background: var(--t-hot-tint); }
.temp-chip[data-temp="warm"] { color: var(--t-warm-ink); background: var(--t-warm-tint); }
.temp-chip[data-temp="cold"] { color: var(--t-cold-ink); background: var(--t-cold-tint); }
.ui-pill.soft { color: var(--text-2); background: var(--surface-2); }
.ui-pill.danger { color: var(--danger); background: var(--danger-tint); }
.ui-pill.success { color: var(--success); background: var(--success-tint); }
.ui-pill.warning { color: var(--warning); background: var(--warning-tint); }
.ui-pill.info { color: var(--primary); background: var(--primary-tint); }

/* Stage stepper (6-stage progress, used on detail pages) */
.ui-stepper { display: flex; gap: 4px; }
.ui-stepper > span { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); transition: background var(--dur-3) var(--ease-out); }
.ui-stepper > span.on { background: var(--primary); }
.ui-stepper.won > span.on { background: var(--success); }
.ui-stepper.lost > span.on { background: var(--danger); }

/* ============================================================
   Charts (SVG from ui-kit.js)
   ============================================================ */
.ui-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ui-chart text { font-family: var(--font); fill: var(--text-3); font-size: 11px; }
.ui-chart .grid { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.ui-chart .line { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 1000); animation: ui-draw 900ms var(--ease-out) both; }
.ui-chart .area { opacity: .9; animation: ui-fade-in 700ms var(--ease-out) both; }
.ui-chart .bar { transform-box: fill-box; transform-origin: bottom; animation: ui-grow-y 600ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.ui-chart .dot { transition: r var(--dur-1); }
.ui-hbar { display: grid; gap: 10px; }
.ui-hbar .row { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; gap: 10px; align-items: center; font-size: var(--fs-sm); }
.ui-hbar .lbl { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-hbar .track { display: block; height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.ui-hbar .fill { display: block; height: 100%; border-radius: 5px; transform-origin: left; animation: ui-grow-x 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
.ui-hbar .val { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

.ui-funnel { display: grid; gap: 6px; }
.ui-funnel .step { display: grid; grid-template-columns: 110px 1fr 120px; gap: 12px; align-items: center; font-size: var(--fs-sm); }
.ui-funnel .name { color: var(--text-2); font-weight: 600; }
.ui-funnel .barwrap { position: relative; height: 30px; }
.ui-funnel .bar { position: absolute; inset: 0 auto 0 50%; transform: translateX(-50%); border-radius: 8px; min-width: 6px;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12px;
  animation: ui-scale-in 600ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
.ui-funnel .conv { color: var(--text-3); font-size: var(--fs-xs); text-align: right; }
.ui-funnel .conv b { color: var(--text); font-weight: 700; }

.ui-ring { position: relative; display: inline-grid; place-items: center; }
.ui-ring svg circle.track { stroke: var(--surface-3); }
.ui-ring svg circle.prog { transition: stroke-dashoffset 900ms var(--ease-out); }
.ui-ring .center { position: absolute; text-align: center; line-height: 1.1; }
.ui-ring .center b { display: block; font-size: 18px; font-weight: 800; color: var(--text); }
.ui-ring .center span { font-size: 11px; color: var(--text-3); }

.ui-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: var(--fs-xs); color: var(--text-2); }
.ui-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }

.ui-delta { font-size: var(--fs-xs); font-weight: 700; }
.ui-delta.up { color: var(--success); } .ui-delta.down { color: var(--danger); } .ui-delta.flat { color: var(--text-3); }
.ui-delta small { font-weight: 600; color: var(--text-3); margin-left: 2px; }

/* ============================================================
   Empty state
   ============================================================ */
.ui-empty { display: grid; justify-items: center; gap: 8px; padding: 34px 20px; text-align: center; color: var(--text-2); }
.ui-empty .art { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  background: var(--brand-grad-soft); color: var(--primary); margin-bottom: 4px; }
.ui-empty .art svg { width: 28px; height: 28px; }
.ui-empty h4 { margin: 0; font-size: var(--fs-lg); color: var(--text); font-weight: 700; }
.ui-empty p { margin: 0; font-size: var(--fs-sm); max-width: 340px; }
.ui-empty .actions { margin-top: 8px; display: flex; gap: 8px; }

/* ============================================================
   Toast (shared look; both surfaces render #toast / .toast)
   ============================================================ */
.ui-toast { position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 14px;
  background: #0d1526; color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-lg);
  animation: ui-fade-up var(--dur-3) var(--ease-out) both; max-width: min(92vw, 520px); }
.ui-toast .ico { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); flex: 0 0 auto; }
.ui-toast.ok .ico { background: var(--success); } .ui-toast.err .ico { background: var(--danger); }
.ui-toast button { background: none; border: 0; color: #9cc0ff; font: inherit; font-weight: 700; cursor: pointer; padding: 0 0 0 6px; }

/* ============================================================
   Bottom sheet + backdrop (shared)
   ============================================================ */




/* Avatars */
.ui-avatar { display: inline-grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; flex: 0 0 auto; overflow: hidden; }
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ui-presence { position: relative; }
.ui-presence::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--success); border: 2px solid var(--surface); }

/* Timeline (activity) */
.ui-timeline { position: relative; display: grid; gap: 2px; }
.ui-timeline .item { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 8px 0; }
.ui-timeline .item::before { content: ""; position: absolute; left: 14px; top: 34px; bottom: -6px; width: 2px; background: var(--border); }
.ui-timeline .item:last-child::before { display: none; }
.ui-timeline .ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); z-index: 1; }
.ui-timeline .ico svg { width: 15px; height: 15px; }
.ui-timeline .item[data-kind="visit"] .ico { background: var(--success-tint); color: var(--success); }
.ui-timeline .item[data-kind="stage"] .ico { background: var(--st-demo-tint); color: var(--st-demo-ink); }
.ui-timeline .item[data-kind="value"] .ico { background: var(--warning-tint); color: var(--warning); }
.ui-timeline .item[data-kind="task"] .ico { background: var(--primary-tint); color: var(--primary); }
.ui-timeline .item[data-kind="owner"] .ico { background: var(--info-tint); color: var(--info); }
.ui-timeline .body { font-size: var(--fs-md); color: var(--text); line-height: 1.45; word-break: break-word; }
.ui-timeline .meta { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}