/* =========================================================================
   MAGNET DESIGN SYSTEM — TOKENS
   The single source of truth. Everything downstream references these vars.
   Scale: 4px base. Color: cool-neutral grays + violet primary + semantics.
   ========================================================================= */

/* .theme-paper: a surface that stays light in the dark theme — a document's page and a spreadsheet's grid
   (styles/views/file-editors.css), whose text and fill colours are the author's own, picked on white. The light
   block is re-declared on it, so everything inside resolves to the light values (the dark block sets html only). */
:root, .theme-paper {
  /* Native UI (selects, pickers, autofill, find bar) follows the app theme —
     the dark block flips this to `dark`. */
  color-scheme: light;

  /* ---- Brand / Primary (INK — the default accent since 4 Sep 2026, owner
     call from the "Book My Time" reference: CTAs, selection and links are
     near-black on light. Ramp = accentRamp("#0E121B"), so the "Ink" accent in
     Settings and this default are the same colour; picking Ink clears the JS
     overrides and lets this file drive BOTH themes — in dark the ramp below
     inverts to WHITE. Blue/violet/amber/orange/pink/green stay selectable
     (settingsStore.ACCENTS) and are written inline by applyAccent(). ---- */
  --primary-50:  #ececed;
  --primary-100: #dbdcdd;
  --primary-200: #b7b8bb;
  --primary-300: #87888d;
  --primary-400: #4d5056;
  --primary-500: #21252d;
  --primary-600: #0e121b;   /* main action / active */
  --primary-700: #0c0f16;
  --primary-800: #090b11;
  --primary-900: #05070b;

  /* ---- Brand (Magnet identity — gold/ink) ---------------------------
     DELIBERATELY SEPARATE FROM --primary-*. The primary ramp is INTERACTION
     colour and the user owns it: Settings → Appearance offers six accents and
     applyAccent() rewrites --primary-50..700 inline on <html> (and the portal
     syncs its own). Anything that must stay Magnet — the mark, the star, the
     splash, the share/login pages — has to sit outside that ramp or it
     re-tints to whatever accent the user picked. These never change.
     Mirrors: assets/magnet-logo.svg, assets/magnet-wordmark.svg,
     assets/magnet-icon.svg, Share.html, server/services/email.js. */
  --brand-gold:      #ffd700;   /* the logo gold */
  --brand-gold-deep: #b7961e;   /* wordmark shadow tone */
  --brand-gold-soft: #fff5cc;   /* tint for brand-marked surfaces */
  /* Meta / Instagram brand colours — the connect-Facebook-&-Instagram bar */
  --brand-meta:      #0866ff;
  --brand-meta-deep: #0a54d6;
  --brand-ig-start:  #f58529;
  --brand-ig-mid:    #dd2a7b;
  --brand-ig-end:    #8134af;
  --brand-ink:       #14141a;   /* the black half of the identity */
  --brand-glow:      0 1px 3px rgba(183, 150, 30, 0.34);

  /* ---- Neutral (cool gray) ----------------------------------------- */
  /* 4 Sep 2026: ramp re-tuned to the slate-cool neutrals of the reference
     design (ink #0E121B headings, #525866 secondary, #E1E4EA hairlines) —
     the old ramp leaned violet. Dark twins below are unchanged. */
  --gray-0:   #ffffff;
  --gray-25:  #fcfcfd;
  --gray-50:  #f7f8fa;
  --gray-100: #f2f3f5;
  --gray-150: #ebedf0;
  --gray-200: #e1e4ea;   /* hairline borders */
  --gray-300: #cdd1d9;
  --gray-400: #a9afbc;
  --gray-500: #848b9b;   /* tertiary text / icons (14 Sep: a shade darker — the app-wide grey read washed out) */
  --gray-600: #4c5260;   /* secondary text (14 Sep: same nudge) */
  --gray-700: #3d4350;
  --gray-800: #222530;
  --gray-900: #0e121b;   /* headings — the "ink" */

  /* ---- Semantic ----------------------------------------------------- */
  /* hues follow the reference state palette (green #1FC16B, orange #FF8447,
     blue #335CFF, red #FB3748); the -600 text tier is pulled darker so it
     still passes as text on white, the -bg tints are the palette's lightest step */
  --success-600: #1a9e56;
  --success-bg:  #e3f7ec;
  --danger-600:  #f43f4f;
  --danger-bg:   #ffe8ea;
  --warning-600: #f0762a;
  --warning-bg:  #ffeee3;
  --info-600:    #335cff;
  --info-bg:     #e9edff;
  /* extended semantic steps — the -700 text tier + -50 soft tints views were
     already reaching for (formerly phantom fallbacks; dark twins below) */
  --success-50:  #effcf5;
  --success-700: #147a42;
  --warning-50:  #fff5ee;
  --warning-700: #bf5416;   /* the app's pending/overdue amber */
  --danger-300:  #fda3ab;

  /* ---- Category / badge tints (light) ------------------------------- */
  --cat-demo-bg:    #fbf0d9;  --cat-demo-fg:    #b9760c;
  --cat-review-bg:  #e2f5ea;  --cat-review-fg:  #138a52;
  --pri-high-bg:    #fbe7ec;  --pri-high-fg:    #cf365a;
  --pri-medium-bg:  #faf0d9;  --pri-medium-fg:  #c2790f;
  --pri-low-bg:     #e2f5ea;  --pri-low-fg:     #138a52;
  --cat-mobile-bg:  #f1ecfe;  --cat-mobile-fg:  #8b5cf6;

  /* lead-source channel tints (the Source chips in the leads table + panel) */
  --chan-meta-bg:   #e8f1fe;  --chan-meta-fg:   #0e5fcb;
  --chan-web-bg:    #e6f6f0;  --chan-web-fg:    #0b7a55;
  --chan-funnel-bg: #fdf1e0;  --chan-funnel-fg: #9a5a08;
  --chan-manual-bg: #eef2f6;  --chan-manual-fg: #475569;

  /* file-type icon colours */
  --file-pdf:   #d8453b;
  --file-doc:   #2f6ae0;
  --file-sheet: #1a8a52;
  --sheet-select: #1a73e8;   /* a spreadsheet's selection blue (Google Sheets) */
  --swatch-tick:       #ffffff;   /* the tick on a colour-palette swatch (the swatches are literal colours, so these stay put in dark) */
  --swatch-tick-light: #000000;   /* …on a pale swatch */
  --file-img:   #b9760c;
  --file-fig:   #a259ff;

  /* empty-state illustration */
  --illus-paper:  #ffffff;
  --illus-paper2: #f1f1f4;
  --illus-line:   #c4c4cf;
  --illus-line2:  #cdced8;
  --illus-grid:   #d7d7df;

  /* foreground that sits ON the accent/primary surface (flips for light accents) */
  --on-primary: #ffffff;
  --on-primary-static: #ffffff;   /* text on a brand-coloured fill (Meta blue) — same in both themes */
  /* foreground on a --primary-50/100/200 TINT (badges, soft chips, active
     tiles) — dark ink on the light tints, flipped to a light step in dark. */
  --primary-tint-fg: var(--primary-700);
  /* accent-tinted glow used under primary actions (overridden per-accent by JS) */
  --primary-glow: 0 1px 2px rgba(14, 18, 27, 0.28), inset 0 1px 0 rgba(255,255,255,0.14);
  --primary-glow-lg: 0 6px 16px rgba(14, 18, 27, 0.30);

  /* ---- CRM stage colours ------------------------------------------- */
  --stage-leads:     #b6b6c2;
  --stage-discovery: #6d3df0;
  --stage-demo:      #f0a63a;
  --stage-won:       #22a565;

  /* ---- Surfaces ----------------------------------------------------- */
  --canvas:        #dfe2e8;   /* gray frame behind the app */
  --surface:       #ffffff;   /* cards, panels */
  --logo-well:     #ffffff;   /* the tile behind a client's transparent logo — logos are drawn for white, so it stays white in the dark theme too */
  --logo-well-dark: #1a1d26;  /* …and behind a light (white-on-transparent) logo */
  --surface-sidebar: #fafbfc; /* left navigation rail */
  --surface-field:   #f3f4f6; /* filled inputs / account switcher / soft buttons */
  --surface-lane:    #f4f5f7; /* kanban column lanes — 3.5 ΔL* off --surface so the lane, not a border, separates the cards */
  --surface-event:   color-mix(in srgb, var(--primary-600) 3%, var(--surface)); /* calendar event blocks */

  /* sidebar nav item states (shared) */
  --nav-active-bg:   #f2f3f5;
  --nav-hover-bg:    #f5f6f8;
  --nav-active-fg:   #0e121b;

  /* dashboard metric cards */
  --metric-border:   #e6e8ee;
  --metric-up-bg:    #eafdf9;
  --metric-up-fg:    #3a9b80;
  --metric-down-bg:  #fdecec;
  --metric-meta:     #545768;
  --surface-sunk:  #f5f7fa;   /* table header, sunk areas */
  --surface-2: var(--gray-100); /* subtle chip/track fill one step below --surface */
  /* hover/selected surfaces derive from the ACCENT (applyAccent overrides
     --primary-*), so they re-tint with the user's accent instead of staying
     violet. Mix ratios match the old hand-tuned values for the default accent. */
  --surface-hover: color-mix(in srgb, var(--primary-600) 7%, var(--surface));          /* row / item hover */
  --surface-hover-strong: color-mix(in srgb, var(--primary-600) 11%, var(--surface));  /* selected + hover */
  --overlay-dark:  #29233f;   /* bulk-select toolbar */
  --sheet-scrim:   rgba(11, 11, 15, 0.45);   /* one dim shade for every bottom sheet */
  /* text/controls sitting ON photos & video — deliberately theme-constant,
     pair with --text-invert for the glyph on top */
  --overlay-media:        rgba(0, 0, 0, 0.55);
  --overlay-media-strong: rgba(20, 20, 28, 0.72);

  /* iOS "liquid glass" controls (mobile task-sheet header buttons) — a frosted,
     translucent circle that mirrors the system keyboard's round buttons. The
     translucency lets the page tint show through the blur, so it reads as glass. */
  --glass-btn-bg:     rgba(255, 255, 255, 0.6);
  --glass-btn-border: rgba(255, 255, 255, 0.55);
  --glass-btn-shadow: 0 1px 4px rgba(17, 17, 26, 0.12), 0 0 0 0.5px rgba(17, 17, 26, 0.04), inset 0 0.5px 0 rgba(255, 255, 255, 0.7);
  --glass-btn-active: rgba(120, 120, 128, 0.24);

  /* ---- Text --------------------------------------------------------- */
  --text-strong: var(--gray-900);
  --text:        var(--gray-800);
  --text-muted:  #4c5260;     /* secondary text (tracks --gray-600) */
  --text-soft:   var(--gray-500);
  --text-invert: #ffffff;

  /* ---- Border ------------------------------------------------------- */
  --border:        var(--gray-200);
  --border-strong: var(--gray-300);
  --border-faint:  #eceef2;   /* hairline dividers inside cards / lanes */

  /* ---- Typography --------------------------------------------------- */
  /* Figtree (Google Fonts, linked in every shell's <head> with display=swap)
     — the reference design's face: geometric, friendly, reads well at 13–15px.
     The system stack behind it is the pre-4-Sep native-feel fallback, so an
     offline WKWebView still renders SF rather than a blank flash. */
  --font-sans: "Figtree", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-micro: 9px;   /* badge counts, chart axis labels */
  --text-3xs: 10px;    /* dense chrome: avatar initials, mini captions */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;
  --text-base:15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-normal:1.5;
  --leading-relaxed:1.6;
  --leading-none:  1;

  /* ---- Spacing (4px base, with the 2px half-steps dense chip/table UI
     actually runs on — 6px alone had 200+ hand-typed uses) --------------- */
  --space-0-5: 2px;
  --space-1:  4px;
  --space-1-5: 6px;
  --space-2:  8px;
  --space-2-5: 10px;
  --space-3:  12px;
  --space-3-5: 14px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ---- Radii -------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl:20px;
  --radius-full: 999px;

  /* ---- Shadows ------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(27, 27, 35, 0.05);
  --shadow-sm: 0 1px 3px rgba(27, 27, 35, 0.06), 0 1px 2px rgba(27, 27, 35, 0.04);
  --shadow-md: 0 4px 12px rgba(27, 27, 35, 0.07), 0 2px 4px rgba(27, 27, 35, 0.04);
  --shadow-disc: 0 6px 20px rgba(27, 27, 35, 0.09), 0 1px 2px rgba(27, 27, 35, 0.04);   /* floating 44px discs (mobile topbar) — soft + wide, no hairline */
  --shadow-lg: 0 12px 32px rgba(27, 27, 35, 0.12), 0 4px 8px rgba(27, 27, 35, 0.06);
  --shadow-pop: 0 16px 40px rgba(41, 35, 63, 0.28);
  --ring-primary: 0 0 0 2px var(--primary-100);   /* 14 Sep: thinned from 3px — the halo read heavy on inputs */

  /* ---- Buttons ------------------------------------------------------ */
  --btn-fg:            #1f232d;  /* surface button text / icon / chevron */
  --btn-card-fg:       #0e121b;  /* card-action text / icon / chevron */
  /* Primary CTA follows the ACCENT (owner call 4 Sep: the CTA colour is the
     accent chosen in Settings → Appearance; Ink is the default, and Ink turns
     white in dark theme via the --primary-* dark twins). These indirections
     exist so .btn-primary / .quick-fab have one place to read from. */
  --btn-primary-bg:     var(--primary-600);
  --btn-primary-hover:  var(--primary-700);
  --btn-primary-fg:     var(--on-primary);
  --btn-primary-border: var(--primary-600);
  --btn-primary-shadow: var(--primary-glow);
  --btn-height:        37px;
  --btn-pad-x:         12px;
  --btn-radius:        var(--radius-md);
  --btn-icon-size:     17px;
  --btn-gap:           var(--space-2);
  --btn-shadow:        0 1px 2px rgba(27,27,35,0.10), 0 1px 1px rgba(27,27,35,0.04);
  --btn-shadow-card:   0 1px 2px rgba(27,27,35,0.06);
  --split-divider-h:   22px;
  --split-divider:     var(--gray-200);

  /* ---- Segmented control ------------------------------------------- */
  --seg-track:         #f5f7fa;
  --seg-active:        #ffffff;
  --seg-active-border: #e1e4ea;
  --seg-active-shadow: 0 1px 2px rgba(27, 27, 35, 0.08);

  /* ---- Motion ------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* iOS-style decelerate curve for sheets / slides — strong ease-out with no
     bounce, mirroring UIKit modal presentation. Feels native on mobile. */
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 120ms;
  --dur:      180ms;
  --dur-slow: 260ms;

  /* ---- Bottom-sheet motion (app-wide) ------------------------------- *
     One vocabulary for every bottom sheet: open is a touch slower and
     spring-ish (decelerate, no bounce); close is quicker and accelerates
     away; the dim overlay fades fastest so it never lags the sheet. The
     shared drag gestures (drawerShell.wireSheetDrag / mountDrawer) reuse
     these for spring-back + flick-dismiss so motion reads identically
     whether a sheet is tapped open or thrown shut. */
  --motion-sheet-open:  320ms;
  --motion-sheet-close: 220ms;
  --motion-overlay:     180ms;
  --ease-enter:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:       cubic-bezier(0.4, 0, 1, 1);
  --ease-spring-ish: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot pop (check ticks, celebrates) */

  /* ---- Layout ------------------------------------------------------- */
  --sidebar-w: 264px;
  --topbar-h:  73px;
  /* Shared app-shell rows — sidebar and main use the SAME heights so their
     bottom borders align by construction (no manual offsets). */
  --shell-header-height:  66px;   /* row 1: brand  ⇄  page header */
  --cv-bar-h:             40px;   /* the portal's "Viewing … as admin" bar above the app frame */
  --shell-toolbar-height: 66px;   /* row 2: account ⇄  page toolbar */
  /* stacking ladder — every layer the app uses, low to high. New surfaces
     pick a named layer; never invent a literal. */
  --z-sticky:  20;
  --z-toolbar: 40;
  --z-popover: 60;
  --z-modal:   90;
  --z-toast:   110;   /* toasts sit above modals */
  --z-overlay: 200;   /* view-level covers (composer stage, onboarding) */
  --z-scrim:   1000;  /* dashboard-customize scrim */
  --z-sheet:   1200;  /* bottom sheets, drawers, command palette */
  --z-sheet-high: 1300;
  --z-lightbox: 5000;
  --z-splash:  9999;

  /* device safe areas (iOS notch / home bar) — the single home for the
     --safe-* dialect; standalone token-light pages may use raw env() */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  /* responsive shell metrics (shared by responsive.css + views) */
  --sidebar-rail:   84px;   /* collapsed icon rail (matches .app.collapsed) */
  --bottomnav-h:    60px;   /* mobile bottom bar content height */
  --mobile-topbar-h:54px;   /* compact mobile header height */

  /* ---- Reporting chart (shared ReportingChartCard component) -------- */
  --chart-bar-fill-top:    #ebebf2;   /* light grey bar — gradient top */
  --chart-bar-fill-bottom: #f7f7fb;   /* light grey bar — gradient bottom */
  --chart-bar-sel-top:     var(--primary-400);   /* selected bar — accent top */
  --chart-bar-sel-bottom:  var(--primary-100);   /* selected bar — accent bottom */
  --chart-bar-cap:         var(--primary-500);   /* purple top cap */
  --chart-bar-cap-sel:     var(--primary-600);   /* selected/hover cap */
  --chart-grid:            #ececf1;   /* dashed horizontal grid lines */
  --chart-axis-line:       #e6e6ec;   /* x / y axis lines */
  --chart-axis-text:       var(--text-soft);
  --chart-trend:           #cdcdd6;   /* dotted trend line */
  --chart-point:           #1b1b23;   /* black selected point */
  --chart-guide:           #1b1b23;   /* vertical dashed selected guide */
  --chart-tip-bg:          var(--surface);
  --chart-tip-border:      var(--border);
  --chart-tip-shadow:      var(--shadow-lg);
  --chart-pad:             var(--space-5);

  /* ---- Decorative palettes (JS reads these as var() strings — see
     scripts/data.js avatarColors, shareKit GRADS, leadDrawerHelpers
     confetti, clientOnboarding). Calendar swatches are the one exception:
     they stay hex in calendarFilterPopover.js because the server validates
     stored colours against /^#[0-9a-f]{6}$/. ---------------------------- */
  --avatar-1: #7c4def;  --avatar-2: #e5894d;  --avatar-3: #3b82f6;  --avatar-4: #db4d77;
  --avatar-5: #18a558;  --avatar-6: #e0900b;  --avatar-7: #0ea5b7;  --avatar-8: #8c8c9a;
  --celebrate-1: #266df0;  --celebrate-2: #f5a300;  --celebrate-3: #f97514;
  --celebrate-4: #fa4b94;  --celebrate-5: #00d17e;  --celebrate-6: #6d3df0;
  --share-grad-1: linear-gradient(135deg, #6d3df0, #a988f6);
  --share-grad-2: linear-gradient(135deg, #2684fc, #46c5e8);
  --share-grad-3: linear-gradient(135deg, #ff7a59, #ffb45c);
  --share-grad-4: linear-gradient(135deg, #1fb6a6, #74e0c2);
  --share-grad-5: linear-gradient(135deg, #ef4d8b, #f59ac0);
  --share-grad-6: linear-gradient(135deg, #3a3f63, #7b5bf0);
  --share-grad-7: linear-gradient(135deg, #0f9d58, #7bd88f);
  --share-grad-8: linear-gradient(135deg, #f4b400, #ffd45e);
  /* dark ink on light logo/avatar fills (ui.js logo()) — theme-constant */
  --on-light: #1b1b23;
}

/* A chosen accent (settingsStore applyAccent writes its ramp inline on <html> and marks html[data-accent]) carries on
   into a .theme-paper surface, which would otherwise re-declare the default Ink ramp over it. */
html[data-accent]:not([data-accent="ink"]) .theme-paper {
  --primary-50: inherit; --primary-100: inherit; --primary-200: inherit; --primary-300: inherit;
  --primary-400: inherit; --primary-500: inherit; --primary-600: inherit; --primary-700: inherit;
  --on-primary: inherit; --ring-primary: inherit; --primary-glow: inherit; --primary-glow-lg: inherit;
}

/* =========================================================================
   DARK THEME — remaps the semantic token layer. Components reference tokens,
   so flipping these values re-themes the whole app.
   ========================================================================= */
html[data-theme="dark"] {
  color-scheme: dark;

  /* inverted neutral ramp: gray-0 = darkest surface … gray-900 = lightest text */
  --gray-0:   #17171c;
  --gray-25:  #1a1a20;
  --gray-50:  #1e1e25;
  --gray-100: #24242c;
  --gray-150: #2a2a33;
  --gray-200: #32323d;   /* hairline borders */
  --gray-300: #40404c;
  --gray-400: #5b5b69;
  --gray-500: #8b8b98;   /* tertiary text / icons */
  --gray-600: #a7a7b4;   /* secondary text */
  --gray-700: #c6c6d0;
  --gray-800: #e4e4ea;   /* body text */
  --gray-900: #f6f6f9;   /* headings */

  /* semantic tints — muted for dark backgrounds */
  --success-600: #34c172;
  --success-bg:  #14301f;
  --danger-600:  #ff5c6a;
  --danger-bg:   #3a191d;
  --warning-600: #ff9a63;   /* the reference orange, lifted for dark */
  --warning-bg:  #3a2414;
  --info-600:    #6b8bff;
  --info-bg:     #1c2447;
  --success-50:  #103524;
  --success-700: #5fd394;
  --warning-50:  #3d2616;
  --warning-700: #ffb58a;
  --danger-300:  #7a3538;

  /* category / badge tints (dark) */
  --cat-demo-bg:    #33270f;  --cat-demo-fg:    #e7a52c;
  --cat-review-bg:  #14301f;  --cat-review-fg:  #34c172;
  --pri-high-bg:    #38191b;  --pri-high-fg:    #f0696e;
  --pri-medium-bg:  #33270f;  --pri-medium-fg:  #e7a52c;
  --pri-low-bg:     #14301f;  --pri-low-fg:     #34c172;
  --cat-mobile-bg:  #241b3a;  --cat-mobile-fg:  #a78bfa;

  /* lead-source channel tints (dark — same family as the semantic tints) */
  --chan-meta-bg:   #1b2741;  --chan-meta-fg:   #5b8cf0;
  --chan-web-bg:    #14301f;  --chan-web-fg:    #34c172;
  --chan-funnel-bg: #33270f;  --chan-funnel-fg: #e7a52c;
  --chan-manual-bg: #262b33;  --chan-manual-fg: #9aa4b2;

  /* file-type icon colours (brightened for dark) */
  --file-pdf:   #f0696e;
  --file-doc:   #6b9bff;
  --file-sheet: #34c172;
  --sheet-select: #8ab4f8;
  --swatch-tick:       #ffffff;   /* intentionally constant: it sits on a literal swatch colour */
  --swatch-tick-light: #000000;
  --file-img:   #e7a52c;
  --file-fig:   #b98cff;

  /* empty-state illustration (dark) */
  --illus-paper:  #2a2a33;
  --illus-paper2: #32323d;
  --illus-line:   #40404c;
  --illus-line2:  #3a3a45;
  --illus-grid:   #2c2c35;

  /* CRM stage colours (slightly brighter so they read on dark) */
  --stage-leads:     #6b6b78;
  --stage-discovery: #8b63f3;
  --stage-demo:      #f0b257;
  --stage-won:       #34c172;

  /* surfaces */
  --canvas:        #0e0e12;
  --surface:       #1c1c22;
  --logo-well:     #ffffff;   /* intentionally white: a client's logo is drawn for a white ground */
  --logo-well-dark: #2a2b34;
  --surface-sidebar: #161619;
  --surface-field:   #26262e;
  --surface-lane:    #1f1f26;
  --surface-event:   color-mix(in srgb, var(--primary-500) 6%, var(--surface));

  /* sidebar nav item states */
  --nav-active-bg:   #26262e;
  --nav-hover-bg:    #222229;
  --nav-active-fg:   #f6f6f9;

  /* dashboard metric cards */
  --metric-border:   #2c2c35;
  --metric-up-bg:    #122a26;
  --metric-up-fg:    #4fc4a3;
  --metric-down-bg:  #34191a;
  --metric-meta:     #a7a7b4;
  --surface-sunk:  #1f1f26;
  --surface-hover: color-mix(in srgb, var(--primary-500) 9%, var(--surface));
  --surface-hover-strong: color-mix(in srgb, var(--primary-500) 16%, var(--surface));
  --overlay-dark:  #0c0c10;

  /* iOS liquid-glass controls — dark variant: a smoked translucent circle. */
  --glass-btn-bg:     rgba(60, 60, 67, 0.5);
  --glass-btn-border: rgba(255, 255, 255, 0.14);
  --glass-btn-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(0, 0, 0, 0.3), inset 0 0.5px 0 rgba(255, 255, 255, 0.1);
  --glass-btn-active: rgba(255, 255, 255, 0.16);

  /* accent ramp — light end. mix(#266DF0 -> #1c1c22); without these the 50/100/
     200/300 steps kept their LIGHT values and every tinted background became a
     near-white block on dark. accentRamp() mixes to the same target at runtime
     so the five custom accents behave identically. */
  /* Ink accent in dark = WHITE (owner call 4 Sep): the whole ramp inverts so
     CTAs, selection, today and chart highlights read as white on the dark
     surfaces. Custom accents still overwrite 50..700 inline via applyAccent(). */
  --primary-50:  #24242c;
  --primary-100: #2c2c35;
  --primary-200: #3c3c47;
  --primary-300: #c9cbd3;
  --primary-400: #dcdde3;
  --primary-500: #e9eaef;
  --primary-600: #f6f6f9;   /* main action / active */
  --primary-700: #dcdde3;
  --primary-800: #c9cbd3;
  --primary-900: #b3b6c0;
  --on-primary:  #0e121b;
  --on-primary-static: #ffffff;   /* unchanged on dark — a Meta-blue fill keeps white text */
  --primary-glow:    0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --primary-glow-lg: 0 6px 16px rgba(0, 0, 0, 0.5);
  /* foreground for text/icons sitting ON a --primary-50/100/200 tint: the dark
     tints need a LIGHT accent step, the light tints need a dark one. */
  --primary-tint-fg: var(--primary-300);

  /* brand — the gold holds on dark; the deep tone lifts, tint and ink invert */
  --brand-gold-deep: #e3c04a;
  --brand-gold-soft: #3a3218;
  --brand-meta:      #3d8bff;
  --brand-meta-deep: #2a74e8;
  --brand-ig-start:  #f7963f;
  --brand-ig-mid:    #e6468f;
  --brand-ig-end:    #9a52c4;
  --brand-ink:       #f6f6f9;
  --brand-glow:      0 1px 3px rgba(0, 0, 0, 0.5);

  /* text */
  --text-muted:  #a3a3af;

  /* borders */
  --border-faint:  #28282f;
  --split-divider: var(--gray-200);

  /* segmented control — active pill sits ABOVE the track (lighter) */
  --seg-track:         #24242c;
  --seg-active:        #3a3a45;
  --seg-active-border: #46464f;
  --seg-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);

  /* shadows — deeper on dark */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-disc: 0 6px 20px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.6);
  --ring-primary: 0 0 0 2px rgba(255, 255, 255, 0.28);

  /* buttons */
  --btn-fg:      #e4e4ea;
  --btn-card-fg: #f6f6f9;
  /* (primary CTA tokens chain to --primary-* / --on-primary, which flip above) */
  --btn-shadow:        0 1px 2px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.25);
  --btn-shadow-card:   0 1px 2px rgba(0,0,0,0.3);

  /* reporting chart */
  --chart-bar-fill-top:    #2a2a33;
  --chart-bar-fill-bottom: #222229;
  --chart-bar-sel-top:     var(--primary-600);
  --chart-bar-sel-bottom:  color-mix(in srgb, var(--primary-600) 28%, var(--surface));
  --chart-grid:            #26262e;
  --chart-axis-line:       #2c2c35;
  --chart-trend:           #3a3a45;
  --chart-point:           #f6f6f9;
  --chart-guide:           #f6f6f9;
}

/* =========================================================================
   Safari < 16.2 (iOS 16.0/16.1) has no color-mix(); plain approximations keep
   hover/selection surfaces visible there. CSS floor otherwise = Safari 16.2.
   ========================================================================= */
@supports not (color: color-mix(in srgb, red, red)) {
  :root, .theme-paper {
    --surface-event:        #f7f8fa;
    --surface-hover:        #eeeff2;
    --surface-hover-strong: #e6e7eb;
  }
  html[data-theme="dark"] {
    --surface-event:        #24242c;
    --surface-hover:        #2a2a33;
    --surface-hover-strong: #32323d;
    --chart-bar-sel-bottom: #4a4a56;
  }
}