/* ==========================================================================
   MyBizBOSS Design Tokens — v1
   Extracted from the de-facto standard established across nine Web mockups
   (most recently mbb-client-management.html) and checked against the live
   mybizboss.com marketing site's computed styles.

   This file is the single source of truth for color, type, and elevation.
   Link it directly — do not re-declare this block inline in a new file.

   Usage: <link rel="stylesheet" href="tokens.css">
   Pair with components.css for the reusable UI primitives built on top of
   these tokens (buttons, form fields, badges, tabs, switches).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Overpass:wght@400;500;600&display=swap');

:root {
  /* Ink / text */
  --ink: #042E4F;
  --ink-soft: #33526B;
  --ink-faint: #4A6577;

  /* Surfaces */
  --surface: #FEFEFE;
  --panel: #F4F6F7;
  --panel-raised: #FEFEFE;

  /* Lines */
  --line: #E7EBEE;
  --line-strong: #E3E8EB;

  /* Brand accent — orange. Reserved for checkboxes, toggle-on state,
     status dots, thin borders/underlines. Never a button fill, a link
     color, or running text. See components.css .btn.primary for why
     primary actions use navy instead. */
  --accent: #E6751B;
  --accent-soft: #FCF3EC;

  /* Focus ring */
  --focus: #042E4F;

  /* Secondary accent — blue */
  --info: #5988D6;
  --info-soft: #EEF2FA;
  --info-text: #3D6BBA; /* for small text on --info-soft; --info itself is for borders, icons and fills */

  /* Semantic status colors */
  --green: #2A7248;
  --green-bg: #E7F4EC;
  --yellow: #8A5F00;
  --yellow-bg: #FBF1DA;
  --red: #B3261E;
  --red-bg: #FBEAE9;

  /* Brand-name aliases (used interchangeably with --ink in older files —
     kept for compatibility; new work should prefer --ink/--surface/etc.) */
  --navy: #042E4F;
  --grey: #7C8591;
  --black: #17191C;
  --navy-border: var(--navy);

  /* Type */
  --font-ui: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Overpass', -apple-system, 'Segoe UI', sans-serif;

  /* Elevation — matched against the live marketing site's actual computed
     card shadow. Use on any raised card/panel/modal surface. */
  --shadow-card: 0 4px 16px rgba(4,46,79,0.09), 0 12px 32px rgba(4,46,79,0.07);
  --shadow-card-tight: 0 1px 3px rgba(4,46,79,0.08), 0 8px 24px rgba(4,46,79,0.06);

  /* Radii */
  --radius-card: 10px;
  --radius-control: 7px;
  --radius-btn: 8px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E8ECEE; --ink-soft: #A8B3BA; --ink-faint: #909BA4;
    --surface: #14171A; --panel: #1B1F23; --panel-raised: #20252A;
    --line: #2B3136; --line-strong: #3A4147;
    --accent: #E6751B; --accent-soft: #3A281A; --focus: #E8ECEE;
    --info: #5988D6; --info-soft: #202B3C; --info-text: #8DAEE8;
    --green: #5FBE85; --green-bg: #17281E;
    --yellow: #D9A63C; --yellow-bg: #2C2410;
    --red: #E2837C; --red-bg: #2E1816;
    --navy: #042E4F; --grey: #7C8591; --black: #ECEEF0; --navy-border: var(--grey);
  }
}
:root[data-theme="dark"] {
  --ink: #E8ECEE; --ink-soft: #A8B3BA; --ink-faint: #909BA4;
  --surface: #14171A; --panel: #1B1F23; --panel-raised: #20252A;
  --line: #2B3136; --line-strong: #3A4147;
  --accent: #E6751B; --accent-soft: #3A281A; --focus: #E8ECEE;
  --info: #5988D6; --info-soft: #202B3C; --info-text: #8DAEE8;
  --green: #5FBE85; --green-bg: #17281E;
  --yellow: #D9A63C; --yellow-bg: #2C2410;
  --red: #E2837C; --red-bg: #2E1816;
  --navy: #042E4F; --grey: #7C8591; --black: #ECEEF0; --navy-border: var(--grey);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--font-ui); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}