/* Cleanings App – design tokens. Every colour, radius, shadow and font lives here; components only use the tokens.
   Brand colours come from branding.json via /brand.css (loaded after this file) – change the brand there, not here.
   Look of UI mockup 2 (docs/mockups): dark teal sidebar, warm off-white page, white cards with a 1 px light border and 12 px radius,
   solid teal primary buttons, soft pastel status pills, dark teal → bright teal hero banner. Font: Plus Jakarta Sans (self-hosted, OFL).
   Light first, dark as a tested variant (data-mode="dark"). Text colours keep a contrast of at least 4.5:1 on their backgrounds. */
:root {
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs: 14px; --fs-md: 15px; --fs-lg: 18px; --fs-xl: 26px; --fs-2xl: 30px;

  --brand: #0f766e; --brand-600: #0d655e; --brand-700: #0b524d; --brand-400: #169e93; --brand-900: #0b3b37; --brand-bright: #2dd4bf;
  --brand-50: color-mix(in srgb, var(--brand) 8%, #fff); --brand-100: color-mix(in srgb, var(--brand) 16%, #fff);
  --accent: #e8833a; --accent-600: #c76a26; --accent-ink: #a14e17; --accent-50: color-mix(in srgb, var(--accent) 12%, #fff);
  --primary: var(--brand); --primary-hover: var(--brand-600); --primary-soft: color-mix(in srgb, var(--brand) 11%, #fff); --on-primary: #ffffff;
  /* hero banner (Home, Dashboard, public proof page): dark teal → bright teal */
  --hero-from: var(--brand-900); --hero-mid: var(--brand); --hero-to: var(--brand-bright);
  --grad: linear-gradient(120deg, var(--hero-from) 0%, var(--hero-mid) 58%, var(--hero-to) 100%);
  --hero-ink: #ffffff; --hero-ink-2: rgba(255, 255, 255, .9); --hero-btn-bg: #ffffff; --hero-btn-ink: var(--brand-900);

  /* sidebar (dark teal, white labels, teal pill for the active item) */
  --sb-bg: var(--brand-900); --sb-text: #d4ebe7; --sb-muted: #a3c4be; --sb-hover: rgba(255, 255, 255, .08); --sb-active: var(--brand); --sb-active-ink: #ffffff;
  --sb-line: rgba(255, 255, 255, .12); --sb-soft: rgba(255, 255, 255, .07);
  /* job header on the phone (cleaner) */
  --job-head: var(--brand-900); --job-glow: #3ee6c9;

  --bg: #f5f5f1; --surface: #ffffff; --surface-2: #f7f9f8; --surface-3: #ebf1ef; --overlay: rgba(16, 32, 31, .45);
  --border: #dde7e4; --border-strong: #c9d8d4; --focus: var(--brand-400);
  --text: #12201e; --text-2: #33484a; --text-3: #546a66; --text-inv: #ffffff;
  --th-bg: #edf3f1; --th-ink: var(--text);

  --success: #0b6b40; --success-bg: #d5f2e3; --warning: #8a4b00; --warning-bg: #fde9c8; --danger: #b3261e; --danger-bg: #fad9d5; --info: #1b4f80; --info-bg: #d7e8f8; --neutral-bg: #e5ebef;
  /* status pills (spec 16.5, mockup palette): planned light blue, in progress amber, completed green, cancelled / needs cleaner light red, inactive blue-grey */
  --st-planned: #1b4f80; --st-planned-bg: #d7e8f8; --st-progress: #8a4b00; --st-progress-bg: #fde9c8; --st-done: #0b5a37; --st-done-bg: #d5f2e3;
  --st-cancelled: #9b2c20; --st-cancelled-bg: #fad9d5; --st-neutral: #3e5366; --st-neutral-bg: #e3e9ef;
  /* avatars (initials) and icon chips */
  --av-bg: #d7e8f8; --av-ink: #1b4f80;
  /* buttons (spec 16.4 in the mockup look): create/save = solid teal, delete = solid red, destructive secondary = outlined red,
     PDF/preview = blue-purple, back = outlined blue, everything else outlined */
  --btn-create: var(--brand); --btn-create-hover: var(--brand-600); --btn-delete: #b3261e; --btn-delete-hover: #96201a; --btn-pdf: #4f46e5; --btn-pdf-hover: #4338ca;
  --btn-back: var(--surface); --btn-back-text: #1b4f80; --btn-back-border: #8fb3d6; --btn-back-hover: #eef5fc;
  /* chart series */
  --c-1: #0f766e; --c-2: #e8833a; --c-3: #3b82f6; --c-4: #84cc16; --c-5: #db2777; --c-6: #8b5cf6; --c-other: #94a3b8; --c-prev: #cbd5e1;

  --radius-sm: 8px; --radius: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px;
  --shadow-sm: none; --shadow: 0 1px 2px rgba(16, 32, 31, .05), 0 6px 18px rgba(16, 32, 31, .06); --shadow-lg: 0 16px 48px rgba(16, 32, 31, .18);
  --sidebar-w: 260px; --topbar-h: 60px; --gap: 16px; --input-h: 42px; --bottom-nav-h: 64px;
  color-scheme: light;
}
[data-mode="dark"] {
  --brand-50: color-mix(in srgb, var(--brand-400) 18%, #0c1615); --brand-100: color-mix(in srgb, var(--brand-400) 30%, #0c1615);
  --primary: #3fc1b2; --primary-hover: #63d1c4; --primary-soft: color-mix(in srgb, var(--brand-400) 20%, transparent); --on-primary: #04201d;
  --accent-50: color-mix(in srgb, var(--accent) 16%, transparent); --accent-ink: #f2a669;
  --hero-from: #072724; --hero-mid: #0c5a53; --hero-to: #158a7d; --hero-btn-bg: #e8f6f3; --hero-btn-ink: #06302c;
  --sb-bg: #081c1a; --sb-text: #cfe3df; --sb-muted: #93b1ab; --sb-hover: rgba(255, 255, 255, .06); --sb-active: #0f6b63; --sb-line: rgba(255, 255, 255, .09); --sb-soft: rgba(255, 255, 255, .05);
  --job-head: #082522;
  --bg: #0b1413; --surface: #111d1c; --surface-2: #152322; --surface-3: #1c2e2c; --overlay: rgba(0, 0, 0, .6);
  --border: #223634; --border-strong: #2f4744; --focus: #7dd3c8;
  --text: #e6efed; --text-2: #b8c9c6; --text-3: #8fa5a1;
  --th-bg: #172725; --th-ink: var(--text);
  --success: #6ee7a6; --success-bg: rgba(74, 222, 128, .13); --warning: #fcc56b; --warning-bg: rgba(251, 191, 36, .14); --danger: #fb9a92; --danger-bg: rgba(248, 113, 113, .14); --info: #93c5f5; --info-bg: rgba(124, 184, 242, .14); --neutral-bg: #1c2e2c;
  --st-planned: #9cc9f3; --st-planned-bg: rgba(96, 165, 250, .16); --st-progress: #fcc56b; --st-progress-bg: rgba(251, 176, 60, .16); --st-done: #7ee2aa; --st-done-bg: rgba(74, 222, 128, .14);
  --st-cancelled: #fca5a5; --st-cancelled-bg: rgba(248, 113, 113, .16); --st-neutral: #b8c4cc; --st-neutral-bg: rgba(148, 163, 184, .16);
  --av-bg: rgba(96, 165, 250, .18); --av-ink: #b5d6f6;
  --btn-create: #0d7d72; --btn-create-hover: #0b6b62; --btn-delete: #b92d24; --btn-delete-hover: #9f251d; --btn-pdf: #5458e8; --btn-pdf-hover: #4f46e5;
  --btn-back: transparent; --btn-back-text: #b5d6f6; --btn-back-border: #3d6286; --btn-back-hover: rgba(96, 165, 250, .12);
  --c-prev: #334155;
  --shadow-sm: none; --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3); --shadow-lg: 0 16px 48px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
[data-density="compact"] { --input-h: 36px; --gap: 12px; }