/* Design tokens — the single source of truth for color/spacing/type/shadow
   scales, loaded before shell.css on every page. Pure presentation, same
   rule as shell.css: no feature/business-logic content lives here.

   Accent is a deliberately distinct blue-violet — not WhatsApp's green, not
   a generic Bootstrap/Tailwind blue — so the product reads as its own
   brand, not a WhatsApp-tools clone.

   Responsive breakpoints (2026-09-25) — CSS custom properties can't be used
   inside an @media condition, so these three values are documented here as
   the single standard instead and must be used literally (not re-derived
   per page) in every page's own CSS:
     - Mobile:  max-width: 768px   (matches shell.css's own hamburger-nav
                switch, so the sidebar collapsing and a page's own content
                reflowing always happen at the same width — no in-between
                state with a mobile nav over a desktop-width table)
     - Tablet:  769px – 1024px
     - Desktop: 1025px and up (default/no query — desktop is the base
                layout every page already writes) */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Raw neutral scale */
  --gray-0: #ffffff;
  --gray-50: #f8f9fb;
  --gray-100: #f1f2f5;
  --gray-200: #e4e6eb;
  --gray-300: #d1d5db;
  --gray-400: #9aa1ac;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2430;
  --gray-900: #12151c;

  /* Accent — locked in 2026-09-01 as Bizmwide Connect's official fixed
     brand color (#5B5FEF, indigo/blue-violet), confirmed with the product
     owner over generic blue and a Google-style multi-color scheme. This is
     the reference value for any future cross-channel branding (email
     templates, SMS, etc.) — don't change without re-confirming. */
  --accent: #5b5fef;
  --accent-hover: #4548d6;
  --accent-active: #3a3dbd;
  --accent-subtle: #eef0ff;
  --accent-contrast: #ffffff;

  /* Semantic */
  --success: #12875a;
  --success-subtle: #e6f7ef;
  --warning: #b45309;
  --warning-subtle: #fef3e2;
  --danger: #d92d20;
  --danger-subtle: #fde9e7;
  --info: #1570ef;
  --info-subtle: #eaf3ff;

  /* Semantic tokens (existing names — every page already uses these) */
  --bg: var(--gray-50);
  --surface: var(--gray-0);
  --surface-hover: var(--gray-100);
  --text: var(--gray-900);
  --text-muted: var(--gray-500);
  --border: var(--gray-200);

  /* Chrome tokens (2026-09-15) — what the header/sidebar use instead of
     the generic --surface/--text/--border above, so a color theme preset
     (below) can tint just the app's "chrome" (header+sidebar) without
     touching the neutral content canvas (cards/tables keep using
     --surface/--text as before). Declared ONCE here as aliases — CSS
     custom properties resolve against whatever --surface/--text/--accent
     etc. ultimately win on the root element, so these automatically track
     both the dark-mode block below AND whichever [data-accent] preset is
     active, with no need to repeat them in every other block. */
  --chrome-bg: var(--surface);
  --chrome-border: var(--border);
  --chrome-text: var(--text);
  --chrome-text-muted: var(--text-muted);
  --chrome-hover: var(--surface-hover);
  --chrome-active-bg: var(--accent-subtle);
  --chrome-active-text: var(--accent);

  /* Spacing, 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* Type (2026-09-15 — bumped --text-sm/base/lg one notch each) — the old
     13px --text-sm was the size buttons, inputs, table cells, badges and
     nav items all actually rendered at day to day (--text-base's 15px was
     only ever the bare-body-copy fallback), which read smaller than the
     14px "medium" most industry dashboards (Fluent, Linear, Stripe) settle
     on for that same everyday UI text. --text-xs/xl/2xl/3xl (captions,
     headings) were already at a normal size and are unchanged. */
  --font-sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --leading-tight: 1.25;
  --leading-normal: 1.55;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration: 180ms;
}

:root[data-theme="dark"] {
  --gray-0: #12151c;
  --gray-50: #171b23;
  --gray-100: #1d2129;
  --gray-200: #2a2f3a;
  --gray-300: #3a4150;
  --gray-400: #5b6472;
  --gray-500: #8890a0;
  --gray-600: #aab0bd;
  --gray-700: #c7ccd6;
  --gray-800: #e4e7ec;
  --gray-900: #f5f6f8;

  --accent: #7b7fff;
  --accent-hover: #9195ff;
  --accent-active: #6266f0;
  --accent-subtle: #23233f;
  --accent-contrast: #0f1115;

  --success: #3fc586;
  --success-subtle: #123425;
  --warning: #f0a13d;
  --warning-subtle: #3a2a12;
  --danger: #f26d63;
  --danger-subtle: #3a1c1a;
  --info: #5aa6ff;
  --info-subtle: #12233a;

  --bg: var(--gray-50);
  --surface: var(--gray-100);
  --surface-hover: var(--gray-200);
  --text: var(--gray-900);
  --text-muted: var(--gray-500);
  --border: var(--gray-200);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* System-preference fallback for a first-ever visit with no stored choice —
   mirrors :root[data-theme="dark"] exactly (kept in sync manually, same
   pattern the artifact-design convention uses: media query first, explicit
   attribute always wins). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gray-0: #12151c;
    --gray-50: #171b23;
    --gray-100: #1d2129;
    --gray-200: #2a2f3a;
    --gray-300: #3a4150;
    --gray-400: #5b6472;
    --gray-500: #8890a0;
    --gray-600: #aab0bd;
    --gray-700: #c7ccd6;
    --gray-800: #e4e7ec;
    --gray-900: #f5f6f8;

    --accent: #7b7fff;
    --accent-hover: #9195ff;
    --accent-active: #6266f0;
    --accent-subtle: #23233f;
    --accent-contrast: #0f1115;

    --success: #3fc586;
    --success-subtle: #123425;
    --warning: #f0a13d;
    --warning-subtle: #3a2a12;
    --danger: #f26d63;
    --danger-subtle: #3a1c1a;
    --info: #5aa6ff;
    --info-subtle: #12233a;

    --bg: var(--gray-50);
    --surface: var(--gray-100);
    --surface-hover: var(--gray-200);
    --text: var(--gray-900);
    --text-muted: var(--gray-500);
    --border: var(--gray-200);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  }
}

/* ── Color theme presets (2026-09-15) ─────────────────────────────────
   12 selectable presets, chosen via the header's palette icon (js/shell.js)
   and applied as `data-accent` on <html>, independent of the dark/light
   toggle above. Each preset overrides only --accent* (buttons/links) and
   --chrome-* (header+sidebar background) — the content canvas (--surface/
   --bg/--text used by cards/tables/body copy) is untouched by any preset,
   so the working area stays neutral and readable no matter which is picked.

   Each preset ships two blocks: a light-tuned one (`:root[data-accent="x"]`)
   and a dark-tuned one (`:root[data-theme="dark"][data-accent="x"]`). The
   dark block's extra attribute selector gives it higher specificity than
   both the light preset block AND the plain `:root[data-theme="dark"]`
   block above, so it always wins when both dark mode and a preset are
   active, regardless of source order — no !important needed anywhere.
   "indigo" mirrors today's fixed brand color/look exactly. */

:root[data-accent="indigo"] {
  --accent: #5b5fef; --accent-hover: #4548d6; --accent-active: #3a3dbd; --accent-subtle: #eef0ff; --accent-contrast: #ffffff;
  --chrome-bg: #f5f5ff; --chrome-border: #e8e9fc; --chrome-hover: #ecedfb;
}
:root[data-theme="dark"][data-accent="indigo"] {
  --accent: #7b7fff; --accent-hover: #9195ff; --accent-active: #6266f0; --accent-subtle: #23233f; --accent-contrast: #0f1115;
  --chrome-bg: #1a1b2e; --chrome-border: #262840; --chrome-hover: #20223a;
}

:root[data-accent="ocean"] {
  --accent: #1570ef; --accent-hover: #0f5fd1; --accent-active: #0c4fb0; --accent-subtle: #e8f2ff; --accent-contrast: #ffffff;
  --chrome-bg: #f2f8ff; --chrome-border: #e1effd; --chrome-hover: #e9f3fe;
}
:root[data-theme="dark"][data-accent="ocean"] {
  --accent: #5aa6ff; --accent-hover: #78b7ff; --accent-active: #3d8ef0; --accent-subtle: #12233a; --accent-contrast: #0b1220;
  --chrome-bg: #101e30; --chrome-border: #1b2c42; --chrome-hover: #16253a;
}

:root[data-accent="teal"] {
  --accent: #0e9384; --accent-hover: #0b7a6e; --accent-active: #08655c; --accent-subtle: #e3f6f3; --accent-contrast: #ffffff;
  --chrome-bg: #effaf8; --chrome-border: #dcf1ed; --chrome-hover: #e6f5f2;
}
:root[data-theme="dark"][data-accent="teal"] {
  --accent: #3fc5b5; --accent-hover: #5fd3c5; --accent-active: #2fa697; --accent-subtle: #12312d; --accent-contrast: #08211d;
  --chrome-bg: #0e211e; --chrome-border: #17322d; --chrome-hover: #122a25;
}

:root[data-accent="emerald"] {
  --accent: #12875a; --accent-hover: #0f704b; --accent-active: #0c5c3d; --accent-subtle: #e6f7ef; --accent-contrast: #ffffff;
  --chrome-bg: #effaf4; --chrome-border: #dcf0e5; --chrome-hover: #e6f5ec;
}
:root[data-theme="dark"][data-accent="emerald"] {
  --accent: #3fc586; --accent-hover: #5fd59d; --accent-active: #2fa46e; --accent-subtle: #123425; --accent-contrast: #081c13;
  --chrome-bg: #0f221a; --chrome-border: #193428; --chrome-hover: #142b21;
}

:root[data-accent="violet"] {
  --accent: #7c3aed; --accent-hover: #6b28db; --accent-active: #5b1fbd; --accent-subtle: #f1e9fe; --accent-contrast: #ffffff;
  --chrome-bg: #f8f4ff; --chrome-border: #ede1fc; --chrome-hover: #f1e8fe;
}
:root[data-theme="dark"][data-accent="violet"] {
  --accent: #a876ff; --accent-hover: #b98fff; --accent-active: #9257f0; --accent-subtle: #2a1e42; --accent-contrast: #140d22;
  --chrome-bg: #1d1730; --chrome-border: #2c2246; --chrome-hover: #241c3a;
}

:root[data-accent="berry"] {
  --accent: #c2247e; --accent-hover: #a61c6a; --accent-active: #8c1758; --accent-subtle: #fbe6f1; --accent-contrast: #ffffff;
  --chrome-bg: #fef3f9; --chrome-border: #fbdfee; --chrome-hover: #fce9f3;
}
:root[data-theme="dark"][data-accent="berry"] {
  --accent: #f06fb4; --accent-hover: #f58bc4; --accent-active: #dd4e9c; --accent-subtle: #351b29; --accent-contrast: #200f19;
  --chrome-bg: #241420; --chrome-border: #35202f; --chrome-hover: #2c1928;
}

:root[data-accent="rose"] {
  --accent: #e11d48; --accent-hover: #c21540; --accent-active: #a31036; --accent-subtle: #fde7ec; --accent-contrast: #ffffff;
  --chrome-bg: #fff3f5; --chrome-border: #fcdfe4; --chrome-hover: #fde8eb;
}
:root[data-theme="dark"][data-accent="rose"] {
  --accent: #fb7185; --accent-hover: #fc93a2; --accent-active: #f1445f; --accent-subtle: #3a1620; --accent-contrast: #200a0e;
  --chrome-bg: #26141a; --chrome-border: #391f27; --chrome-hover: #2f1a20;
}

:root[data-accent="amber"] {
  --accent: #b45309; --accent-hover: #973f06; --accent-active: #7c3305; --accent-subtle: #fef3e2; --accent-contrast: #ffffff;
  --chrome-bg: #fff8ee; --chrome-border: #fbe8cd; --chrome-hover: #fdf0dd;
}
:root[data-theme="dark"][data-accent="amber"] {
  --accent: #f0a13d; --accent-hover: #f4b25f; --accent-active: #dd8b22; --accent-subtle: #3a2a12; --accent-contrast: #1e1608;
  --chrome-bg: #251c0f; --chrome-border: #382a18; --chrome-hover: #2e2213;
}

:root[data-accent="slate"] {
  --accent: #4b5eaa; --accent-hover: #3d4e8e; --accent-active: #314078; --accent-subtle: #e9ecf7; --accent-contrast: #ffffff;
  --chrome-bg: #f4f5f8; --chrome-border: #e5e7ee; --chrome-hover: #eceef3;
}
:root[data-theme="dark"][data-accent="slate"] {
  --accent: #8c9ae0; --accent-hover: #a2aee8; --accent-active: #7383d6; --accent-subtle: #22273e; --accent-contrast: #0f1119;
  --chrome-bg: #171922; --chrome-border: #232634; --chrome-hover: #1c1f2a;
}

:root[data-accent="royal"] {
  --accent: #2451c4; --accent-hover: #1d40a3; --accent-active: #17348a; --accent-subtle: #e7edfb; --accent-contrast: #ffffff;
  --chrome-bg: #eff3fc; --chrome-border: #dce5f8; --chrome-hover: #e6ecfa;
}
:root[data-theme="dark"][data-accent="royal"] {
  --accent: #6d93f5; --accent-hover: #89a8f8; --accent-active: #4e78e8; --accent-subtle: #17233f; --accent-contrast: #0a1020;
  --chrome-bg: #0e1a33; --chrome-border: #1a2a4a; --chrome-hover: #15233d;
}

:root[data-accent="forest"] {
  --accent: #1f7a4d; --accent-hover: #17643e; --accent-active: #125034; --accent-subtle: #e4f5ec; --accent-contrast: #ffffff;
  --chrome-bg: #eff8f2; --chrome-border: #dceee2; --chrome-hover: #e7f3eb;
}
:root[data-theme="dark"][data-accent="forest"] {
  --accent: #4fcb8b; --accent-hover: #6fd8a2; --accent-active: #38b276; --accent-subtle: #163828; --accent-contrast: #081c12;
  --chrome-bg: #0d1f16; --chrome-border: #182f21; --chrome-hover: #13291b;
}

:root[data-accent="graphite"] {
  --accent: #b8862b; --accent-hover: #9c6f1f; --accent-active: #825c19; --accent-subtle: #fbf1dd; --accent-contrast: #1a1300;
  --chrome-bg: #f6f5f3; --chrome-border: #e9e6e1; --chrome-hover: #efede9;
}
:root[data-theme="dark"][data-accent="graphite"] {
  --accent: #e3b255; --accent-hover: #eac276; --accent-active: #ce9b3c; --accent-subtle: #3a2e14; --accent-contrast: #1a1300;
  --chrome-bg: #1b1917; --chrome-border: #2a2724; --chrome-hover: #221f1d;
}

/* More presets (2026-10-03, user-requested: a white theme and more greens).
   Every light-mode --accent here is ≥4.5:1 against white, so text on it
   stays readable even where white text is hardcoded; the "light" feel
   comes from the chrome (sidebar/header) tint instead. */
:root[data-accent="white"] {
  --accent: #1f2937; --accent-hover: #111827; --accent-active: #030712; --accent-subtle: #f3f4f6; --accent-contrast: #ffffff;
  --chrome-bg: #ffffff; --chrome-border: #eaecf0; --chrome-hover: #f5f6f8;
}
:root[data-theme="dark"][data-accent="white"] {
  --accent: #e5e7eb; --accent-hover: #f3f4f6; --accent-active: #d1d5db; --accent-subtle: #262a31; --accent-contrast: #111827;
  --chrome-bg: #16181d; --chrome-border: #24272e; --chrome-hover: #1d2026;
}

:root[data-accent="mint"] {
  --accent: #087a55; --accent-hover: #066646; --accent-active: #05543a; --accent-subtle: #dcfce7; --accent-contrast: #ffffff;
  --chrome-bg: #ecfdf3; --chrome-border: #ccf5dc; --chrome-hover: #dcfae8;
}
:root[data-theme="dark"][data-accent="mint"] {
  --accent: #4ade80; --accent-hover: #6ee79a; --accent-active: #22c55e; --accent-subtle: #11301f; --accent-contrast: #052e16;
  --chrome-bg: #0d2017; --chrome-border: #163325; --chrome-hover: #122a1e;
}

:root[data-accent="whatsapp"] {
  --accent: #008069; --accent-hover: #006e5a; --accent-active: #005c4b; --accent-subtle: #e7f8f3; --accent-contrast: #ffffff;
  --chrome-bg: #f0f9f6; --chrome-border: #d9efe9; --chrome-hover: #e5f4ef;
}
:root[data-theme="dark"][data-accent="whatsapp"] {
  --accent: #00a884; --accent-hover: #1fbd99; --accent-active: #008f70; --accent-subtle: #0f2e27; --accent-contrast: #04150f;
  --chrome-bg: #0b1f1a; --chrome-border: #14322b; --chrome-hover: #102923;
}

:root[data-accent="leaf"] {
  --accent: #4d7c0f; --accent-hover: #3f6a0a; --accent-active: #355a08; --accent-subtle: #f0f7e4; --accent-contrast: #ffffff;
  --chrome-bg: #f6fbec; --chrome-border: #e8f3d3; --chrome-hover: #eef7de;
}
:root[data-theme="dark"][data-accent="leaf"] {
  --accent: #a3d65c; --accent-hover: #b5e076; --accent-active: #8cc23f; --accent-subtle: #26331a; --accent-contrast: #141f05;
  --chrome-bg: #172012; --chrome-border: #24301b; --chrome-hover: #1d2816;
}

:root[data-accent="sky"] {
  --accent: #0369a1; --accent-hover: #035887; --accent-active: #024a72; --accent-subtle: #e6f4fb; --accent-contrast: #ffffff;
  --chrome-bg: #f0f8fd; --chrome-border: #dceffa; --chrome-hover: #e6f3fb;
}
:root[data-theme="dark"][data-accent="sky"] {
  --accent: #4fb3ea; --accent-hover: #6cc1ef; --accent-active: #2f9bd6; --accent-subtle: #11293a; --accent-contrast: #061825;
  --chrome-bg: #0e1d28; --chrome-border: #172e3d; --chrome-hover: #132532;
}

:root[data-accent="cyan"] {
  --accent: #0e7490; --accent-hover: #0b6178; --accent-active: #095163; --accent-subtle: #e3f6fa; --accent-contrast: #ffffff;
  --chrome-bg: #effafc; --chrome-border: #d7f0f6; --chrome-hover: #e4f5f9;
}
:root[data-theme="dark"][data-accent="cyan"] {
  --accent: #3cc1dc; --accent-hover: #5ccde4; --accent-active: #22a7c3; --accent-subtle: #0f2f37; --accent-contrast: #04191e;
  --chrome-bg: #0c2026; --chrome-border: #153139; --chrome-hover: #11292f;
}

:root[data-accent="orange"] {
  --accent: #c2410c; --accent-hover: #a5370a; --accent-active: #8a2e08; --accent-subtle: #fdeee6; --accent-contrast: #ffffff;
  --chrome-bg: #fff6f1; --chrome-border: #fde4d6; --chrome-hover: #feeee4;
}
:root[data-theme="dark"][data-accent="orange"] {
  --accent: #fb8a4e; --accent-hover: #fca06d; --accent-active: #ef6c2c; --accent-subtle: #3a2014; --accent-contrast: #210d03;
  --chrome-bg: #24160f; --chrome-border: #382217; --chrome-hover: #2e1b12;
}

:root[data-accent="navy"] {
  --accent: #1e3a8a; --accent-hover: #1a3276; --accent-active: #152a63; --accent-subtle: #e8edf8; --accent-contrast: #ffffff;
  --chrome-bg: #f3f6fc; --chrome-border: #e0e7f5; --chrome-hover: #e9eef8;
}
:root[data-theme="dark"][data-accent="navy"] {
  --accent: #7b9be6; --accent-hover: #93aeec; --accent-active: #5f83da; --accent-subtle: #1b2540; --accent-contrast: #0a1124;
  --chrome-bg: #121a2e; --chrome-border: #1d2843; --chrome-hover: #172138;
}