/* The CRM design system (visual refresh, Mohamed 2026-10-25: design/crm-reference/REDESIGN_2026-10-25.md + the 16
   references in inspo-2026-10-25/). ONE place for the tokens: fonts, surfaces, ink, lines, radii, shadows, the accent,
   status and source colours, light and dark. Loaded after base.css / crm.css / shadcn.css so these values win.
   Light is the default (js/theme-boot.js); dark is the same layout on near-black, never neon.
   Readability first: neutrals carry the page, IB red is the one accent (primary actions, "hot"), IB yellow only
   highlights (podium, top performer) and is never text on white. Every text colour here passes WCAG AA (4.5:1) on the
   surfaces it is used on; --faint (3:1+) is only for big numbers' secondary digits and decoration. */

/* ---------------------------------------------------------------- fonts (self-hosted, OFL: assets/fonts/OFL.txt) */
@font-face {
  font-family: 'Geist';
  src: url('../assets/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------- light (default) */
:root, :root[data-theme="light"] {
  color-scheme: light;
  /* type */
  --f-body: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-head: var(--f-body);
  --f-mono: var(--f-body);          /* numbers: the grotesk with tabular figures (font-variant-numeric) */
  --f-code: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;  /* links, slugs, raw JSON */
  --f-serif: var(--f-body);
  --fs-title: 30px; --fs-card: 15.5px; --fs-body: 14px; --fs-small: 12.5px; --fs-kpi: 40px;
  /* shape + motion */
  --radius: 12px;          /* inputs, inner boxes */
  --card-radius: 18px;     /* cards, tiles */
  --tile-radius: 18px;
  --pill: 999px;
  --gap: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* surfaces */
  --bg: #f5f5f3;           /* the page: off-white */
  --paper: #ffffff;        /* cards */
  --paper-2: #f6f6f4;      /* a quiet surface inside a card (list rows, inputs on cards) */
  --paper-3: #eeeeeb;      /* pressed / selected */
  --sidebar-bg: #fbfbfa;
  --top-bg: rgba(245, 245, 243, 0.86);
  --glass: rgba(255, 255, 255, 0.9);
  --panel: #18181b; --panel-line: transparent;
  /* ink */
  --ink: #111113;          /* 18.6:1 on white */
  --ink-2: #3b3d43;        /* 10.9:1 */
  --muted: #5b5e66;        /* 6.4:1 on white, 6.0:1 on the page */
  --faint: #8a8d93;        /* 3.3:1: big numbers' secondary digits, ticks, decoration only */
  --on-ink: #ffffff;
  /* lines */
  --line: #e9e9e5;         /* the hairline */
  --line-strong: #dcdcd6;
  --dash: #c9c9c2;
  --track: #efefeb;
  --hover: rgba(17, 17, 19, 0.045);
  --ring: rgba(225, 29, 46, 0.45);
  /* depth */
  --shadow: 0 1px 2px rgba(16, 16, 20, 0.04);
  --card-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 16, 20, 0.03), 0 8px 24px -16px rgba(16, 16, 20, 0.12);
  --frame-shadow: 0 0 0 1px var(--line), 0 18px 48px -18px rgba(16, 16, 20, 0.28);
  --lift-shadow: 0 0 0 1px var(--line-strong), 0 14px 32px -16px rgba(16, 16, 20, 0.24);
  /* the accent: Intellectual Ballers red (+ yellow for highlights only) */
  --red: #e11d2e; --red-btn: #e11d2e; --red-hover: #c81526;   /* white on #e11d2e: 4.8:1 */
  --red-ink: #b4121f; --red-soft: #fdecee;                     /* #b4121f on the soft tint: 6.4:1 */
  --coral: #ff7a59;
  --yellow: #ffd60a; --yellow-soft: #fff6cc; --yellow-ink: #6b5300;
  /* positive / negative (deltas, money) */
  --green: #16a34a; --green-ink: #146c34; --green-soft: #e5f5ea;
  --lime: var(--green); --lime-ink: var(--green-ink); --lime-soft: var(--green-soft); --on-lime: #ffffff;
  --lilac: #7c5ce6; --lilac-ink: #5b37b8; --lilac-soft: #efeafd;   /* the second series */
  --blue: #2563eb; --blue-ink: #1d4fb8; --blue-soft: #e6effd;
  --amber: #f59e0b; --amber-ink: #8a5300; --amber-soft: #fdf1d8;
  --slate: #64748b; --slate-ink: #3b4250; --slate-soft: #eef0f3;
  --teal: #0d9488; --teal-ink: #0f6b66; --teal-soft: #e2f4f3;
  --grey-ink: #5b5e66; --grey-soft: #f0f0ee;
  /* status: the same everywhere (soft tint + dark text). hot red · warm amber · cold / new slate · contacted teal ·
     booked blue · showed (call done) violet · won (client) green · lost (not a fit) grey */
  --st-new-bg: var(--slate-soft); --st-new-fg: var(--slate-ink);
  --st-contacted-bg: var(--teal-soft); --st-contacted-fg: var(--teal-ink);
  --st-booked-bg: var(--blue-soft); --st-booked-fg: var(--blue-ink);
  --st-call_done-bg: var(--lilac-soft); --st-call_done-fg: var(--lilac-ink);
  --st-client-bg: var(--green-soft); --st-client-fg: var(--green-ink);
  --st-not_a_fit-bg: var(--grey-soft); --st-not_a_fit-fg: var(--grey-ink);
  --st-new-dot: var(--slate); --st-contacted-dot: var(--teal); --st-booked-dot: var(--blue); --st-call_done-dot: var(--lilac);
  --st-client-dot: var(--green); --st-not_a_fit-dot: #a3a5aa;
  --hot-bg: var(--red-soft); --hot-fg: var(--red-ink); --hot-dot: var(--red);
  --warm-bg: var(--amber-soft); --warm-fg: var(--amber-ink); --warm-dot: var(--amber);
  --cold-bg: var(--slate-soft); --cold-fg: var(--slate-ink);
  --dq-bg: var(--grey-soft); --dq-fg: var(--grey-ink);
  --pill-good-bg: var(--green-soft); --pill-good-fg: var(--green-ink);
  --pill-mid-bg: #f1f1ee; --pill-mid-fg: #3b3d43;
  --pill-bad-bg: var(--red-soft); --pill-bad-fg: var(--red-ink);
  --tag-good-bg: #f1f1ee; --tag-good-fg: #3b3d43;
  --tag-risky-bg: var(--amber-soft); --tag-risky-fg: var(--amber-ink);
  --tag-poor-bg: var(--red-soft); --tag-poor-fg: var(--red-ink);
  /* charts */
  --bar: #2b2c31; --bar-soft: #efefeb; --today: var(--red);
  --grid: #ecece8;
  --fn-a: #e11d2e; --fn-b: #ff7a59;          /* the stepped funnel: red -> coral */
  --fn-hatch: rgba(255, 255, 255, 0.55);
  --fn-glow: rgba(225, 29, 46, 0.055);
  /* sources: the same everywhere, next to their logos */
  --src-youtube: #ff0033; --src-instagram: #d62976; --src-skool: #2f5bd3; --src-skool-2: #f5c518;
  --src-scan: #b91c2c; --src-bookform: #f59e0b; --src-game: #16a34a; --src-docs: #1a73e8; --src-canva: #00a3ad;
  --src-direct: #8a8d93; --src-magnet: #7c5ce6;
  /* misc */
  --btn-disabled: #d6d6d0; --switch-off: #d4d4ce;
  --kbd-bg: #ffffff; --kbd-line: #dcdcd6;
  --card-filter: none; --glow: none;
}

/* ---------------------------------------------------------------- dark: the same layout on near-black */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0d;
  --paper: #141417;
  --paper-2: #1a1a1e;
  --paper-3: #222227;
  --sidebar-bg: #0f0f12;
  --top-bg: rgba(11, 11, 13, 0.84);
  --glass: rgba(26, 26, 30, 0.92);
  --panel: #1a1a1e; --panel-line: rgba(255, 255, 255, 0.08);
  --ink: #f2f2f2;          /* 16.9:1 on the cards */
  --ink-2: #d0d0d5;
  --muted: #a6a6ad;        /* 7.6:1 on #141417 */
  --faint: #6f7178;        /* 3.4:1: big numbers' secondary digits, decoration only */
  --on-ink: #0b0b0d;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --dash: rgba(255, 255, 255, 0.24);
  --track: rgba(255, 255, 255, 0.08);
  --hover: rgba(255, 255, 255, 0.055);
  --ring: rgba(255, 99, 112, 0.6);
  --shadow: none;
  --card-shadow: 0 0 0 1px var(--line), 0 10px 30px -18px rgba(0, 0, 0, 0.8);
  --frame-shadow: 0 0 0 1px var(--line-strong), 0 20px 50px -18px rgba(0, 0, 0, 0.9);
  --lift-shadow: 0 0 0 1px var(--line-strong), 0 16px 36px -16px rgba(0, 0, 0, 0.9);
  --red: #f0394a; --red-btn: #e11d2e; --red-hover: #c81526;
  --red-ink: #ff8a95; --red-soft: rgba(240, 57, 74, 0.16);
  --coral: #ff8a6b;
  --yellow: #ffd60a; --yellow-soft: rgba(255, 214, 10, 0.14); --yellow-ink: #ffd95a;
  --green: #22c55e; --green-ink: #6ee7a0; --green-soft: rgba(34, 197, 94, 0.15);
  --on-lime: #04120a;
  --lilac: #a48bf5; --lilac-ink: #c4b4fa; --lilac-soft: rgba(164, 139, 245, 0.17);
  --blue: #5b8cff; --blue-ink: #a9c2ff; --blue-soft: rgba(91, 140, 255, 0.17);
  --amber: #fbbf24; --amber-ink: #fcd27a; --amber-soft: rgba(251, 191, 36, 0.15);
  --slate: #94a3b8; --slate-ink: #cdd5e0; --slate-soft: rgba(148, 163, 184, 0.15);
  --teal: #2dd4bf; --teal-ink: #8ee8da; --teal-soft: rgba(45, 212, 191, 0.14);
  --grey-ink: #a6a6ad; --grey-soft: rgba(255, 255, 255, 0.07);
  --st-not_a_fit-dot: #6f7178;
  --pill-mid-bg: rgba(255, 255, 255, 0.08); --pill-mid-fg: #d0d0d5;
  --tag-good-bg: rgba(255, 255, 255, 0.08); --tag-good-fg: #d0d0d5;
  --bar: #d0d0d5; --bar-soft: rgba(255, 255, 255, 0.07);
  --grid: rgba(255, 255, 255, 0.07);
  --fn-a: #f0394a; --fn-b: #ff8a6b;
  --fn-hatch: rgba(255, 255, 255, 0.28);
  --fn-glow: rgba(240, 57, 74, 0.06);
  --src-youtube: #ff3355; --src-instagram: #ec4f95; --src-skool: #6b8cff; --src-scan: #f0394a; --src-direct: #8a8d93; --src-magnet: #a48bf5;
  --btn-disabled: #34343a; --switch-off: #3a3a41;
  --kbd-bg: #1a1a1e; --kbd-line: rgba(255, 255, 255, 0.2);
}

/* ---------------------------------------------------------------- base type */
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/1.5 var(--f-body); letter-spacing: -0.006em;
  font-feature-settings: 'ss01' off; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before { display: none; }
.mono, .tnum { font-family: var(--f-body); font-variant-numeric: tabular-nums; }
code, kbd, pre, .raw, .code, .sk-card__url, .lm-url, .lk-url { font-family: var(--f-code); }
::selection { background: rgba(225, 29, 46, 0.18); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 8px; }