/* Zowof — Design tokens (Dark Mode, Money/Growth green) */

:root {
  /* Brand greens — calibrated for dark surfaces */
  --brand-50:  #e8fbf2;
  --brand-100: #c9f5dd;
  --brand-200: #93eaba;
  --brand-300: #5dd996;
  --brand-400: #2fc578;
  --brand-500: #14b466;   /* primary */
  --brand-600: #0a9554;
  --brand-700: #0a7544;
  --brand-800: #0c5836;
  --brand-900: #0c3f28;

  /* Surfaces — true dark with subtle warm green undertone */
  --bg-0: #0a0e0c;        /* page bg */
  --bg-1: #0f1411;        /* base panels */
  --bg-2: #141a16;        /* cards */
  --bg-3: #1a211d;        /* raised */
  --bg-4: #222a25;        /* hover */
  --bg-5: #2a332e;        /* pressed / borders */
  /* 2026-09-27: mobile.css's sticky topbar/bottom-nav backdrop-blur bars need a
     translucent surface (solid --bg-1 would hide the blur). Was hardcoded to
     rgba(15,20,17,.88-.92) !important in mobile.css itself — correct by pure
     coincidence in dark mode (same color as --bg-1), but that hardcoding held
     the bars dark in LIGHT mode too while their own text correctly switched to
     --text-primary's light-mode (dark) value: dark-on-dark, unreadable. See
     docs/audits/2026-09-27-dark-mode-contrast-sweep.md. */
  --surface-glass: rgba(15, 20, 17, 0.9);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-brand: rgba(20, 180, 102, 0.35);

  /* Text */
  --text-primary: #ecf2ee;
  --text-secondary: #a8b3ac;
  /* 2026-09-27: was #6f7a73 (3.96:1 on --bg-3, 4.17:1 on --bg-1) — under the
     4.5:1 WCAG AA floor for normal text. Ahmed caught real instances reading
     as near-illegible in dark mode; this affected member-card metadata
     (phone/code/group), nav labels and every secondary hint line, not one
     screen. Lightened to the minimum step that clears 4.5:1 against every
     real background this token sits on (5.13-5.65:1 measured), while staying
     visibly dimmer than --text-secondary (#a8b3ac). See
     docs/audits/2026-09-27-dark-mode-contrast-sweep.md. */
  --text-tertiary: #828d86;
  --text-muted: #4a544e;
  --text-on-brand: #02160c;

  /* Semantic */
  --success: #14b466;
  --success-bg: rgba(20, 180, 102, 0.12);
  --warning: #f4b740;
  --warning-bg: rgba(244, 183, 64, 0.12);
  --danger: #ef4d52;
  --danger-bg: rgba(239, 77, 82, 0.12);
  --info: #4aa8ff;
  --info-bg: rgba(74, 168, 255, 0.12);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 0 4px rgba(20, 180, 102, 0.18);

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

  /* Spacing scale (4-based) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* Typography */
  --font-ar: 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif;
  --font-en: 'Inter', system-ui, sans-serif;
  --font-num: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* ── Window shell (2026-09-10) ─────────────────────────────────────────
     Sidebar rail width — collapsed is the new default; expanded is today's
     literal 260px (live-app.jsx), kept byte-identical so nothing shifts when
     a user opens it. */
  --nav-w: 260px;
  --nav-w-collapsed: 56px;
  --topbar-h: 64px;
  --scrim-overlay: rgba(0, 0, 0, 0.55);

  /* A single z-index scale for the whole app. --z-window is deliberately
     EQUAL to the Modal component's pre-existing z-index (1000) so the
     window-manager shim is a zero-risk swap for all 38 existing call sites —
     see docs/audits (window-shell plan). Depth N -> --z-window + N*10, capped
     under --z-popover. Local dropdown/menu z-indexes (5/10/20/30/40/50) stay
     untouched — they live inside their own stacking contexts and this scale
     is for cross-cutting layers only. */
  --z-drawer: 400;
  --z-sheet: 500;
  --z-window: 1000;
  --z-window-max: 1900;
  --z-popover: 1950;
  --z-taskbar: 1960;
  --z-palette: 2000;
  --z-palette-nested: 2100;
  --z-toast: 9999;
}

/* ── Light theme (2026-09-13) ────────────────────────────────────────────
   Dark stays the unconditional default on bare :root — every user has only
   ever seen it, so switching the silent default on system preference would
   change the app's look with no action from them. Light only applies when
   the user explicitly toggles it (ThemeSwitcher, window-manager.jsx),
   persisted the same way zw_lang/zw_country/zw_biztype already are — an
   explicit choice, not an inferred one. Same token names, same brand hue
   (brand-500 unchanged — it already reads fine on both backgrounds), only
   the surfaces/text/semantic values that actually need to invert. */
:root[data-theme="light"] {
  /* Surfaces — clean, warm-white with the same green undertone as dark */
  --bg-0: #f5f8f6;        /* page bg */
  --bg-1: #ffffff;        /* base panels */
  --bg-2: #ffffff;        /* cards */
  --bg-3: #eef3f0;        /* raised */
  --bg-4: #e2e9e4;        /* hover */
  --bg-5: #cfdad3;        /* pressed / borders */
  /* 2026-09-27: see the dark block's comment on this token — same surface,
     light-mode's own near-white base instead of the hardcoded dark one. */
  --surface-glass: rgba(255, 255, 255, 0.88);

  /* Borders */
  --border-subtle: rgba(13, 27, 20, 0.07);
  --border-default: rgba(13, 27, 20, 0.11);
  --border-strong: rgba(13, 27, 20, 0.18);
  --border-brand: rgba(10, 149, 84, 0.35);

  /* Text */
  --text-primary: #101814;
  --text-secondary: #48544d;
  /* 2026-09-27: same fix as the dark block above, same reason — light mode
     was actually worse (3.47-3.89:1) despite the bug report naming dark
     mode specifically. Darkened to clear 4.5:1 (5.18-5.81:1 measured). */
  --text-tertiary: #5c6862;
  --text-muted: #a7b1ab;
  --text-on-brand: #ffffff;

  /* Brand TEXT tones for a white page (2026-09-23). --brand-300/--brand-400 are used as
     text in ~285 places (status chips, KPI figures, prices, active nav items). At the dark
     theme's #5dd996 / #2fc578 they read ~1.8:1 / ~2.2:1 on white — below every WCAG
     threshold; the MAUI port had inherited the same bug (fixed there 09-13). Only the two
     tones used as foreground change; --brand-500 stays the brand fill. */
  --brand-300: #0a7544;   /* ~5.8:1 on white */
  --brand-400: #0a9554;   /* ~3.9:1 — icons / large text */

  /* Semantic — same hues, darkened/deepened just enough to hold contrast
     on a white page (a light-on-dark warning/danger tone reads as pastel
     and fails on white); *-bg tints lightened to match */
  --success: #0a9554;
  --success-bg: rgba(10, 149, 84, 0.10);
  --warning: #a3690a;
  --warning-bg: rgba(163, 105, 10, 0.10);
  --danger: #c9333c;
  --danger-bg: rgba(201, 51, 60, 0.10);
  --info: #1c72d6;
  --info-bg: rgba(28, 114, 214, 0.10);

  /* Shadows — a dark shadow at dark-theme strength reads muddy on white */
  --shadow-sm: 0 1px 2px rgba(16, 24, 20, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 20, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 20, 0.12);
  --shadow-glow: 0 0 0 4px rgba(10, 149, 84, 0.16);

  --scrim-overlay: rgba(15, 23, 19, 0.4);
}

/* Base reset for all design surfaces */
.zw {
  font-family: var(--font-ar);
  color: var(--text-primary);
  background: var(--bg-0);
  font-feature-settings: "ss01", "cv11";
  font-size: 14px;
  line-height: 1.45;
  direction: inherit;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[lang="en"] .zw {
  font-family: var(--font-en);
}

html, body,
.zw,
.zw *,
.zw *::before,
.zw *::after {
  box-sizing: border-box;
}

.zw button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.zw .num,
.zw .ltr {
  font-family: var(--font-num);
  direction: ltr;
  font-feature-settings: "tnum";
  unicode-bidi: isolate;
}

.zw .en {
  font-family: var(--font-en);
  direction: ltr;
  unicode-bidi: isolate;
}

/* Scrollbars in dark */
.zw ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.zw ::-webkit-scrollbar-track { background: transparent; }
.zw ::-webkit-scrollbar-thumb {
  background: var(--bg-4);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.zw ::-webkit-scrollbar-thumb:hover { background: var(--bg-5); background-clip: padding-box; border: 2px solid transparent; }

/* Common utility surfaces */
.zw-card {
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}

.zw-divider {
  height: 1px;
  background: var(--border-subtle);
  width: 100%;
}

/* Shared chip/badge */
.zw-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-3);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.zw-chip.success { background: var(--success-bg); color: var(--brand-300); border-color: transparent; }
.zw-chip.warn    { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.zw-chip.danger  { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.zw-chip.info    { background: var(--info-bg); color: var(--info); border-color: transparent; }

/* Buttons */
.zw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, transform .05s;
  white-space: nowrap;
  user-select: none;
}
.zw-btn:active { transform: translateY(1px); }
.zw-btn.primary {
  background: var(--brand-500);
  color: var(--text-on-brand);
}
.zw-btn.primary:hover { background: var(--brand-400); }
/* 2026-09-23: white label on #14b466 is ~2.7:1 in the light theme; the deeper brand shade
   carries it at ~5.8:1 (dark theme unchanged: dark label on the bright green, ~7:1). */
:root[data-theme="light"] .zw-btn.primary { background: var(--brand-700); }
:root[data-theme="light"] .zw-btn.primary:hover { background: var(--brand-600); }
.zw-btn.secondary {
  background: var(--bg-3);
  color: var(--text-primary);
  border-color: var(--border-default);
}
.zw-btn.secondary:hover { background: var(--bg-4); }
.zw-btn.ghost {
  background: transparent;
  color: var(--text-secondary);
}
.zw-btn.ghost:hover { background: var(--bg-3); color: var(--text-primary); }
.zw-btn.danger {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: transparent;
}
.zw-btn.danger:hover { background: rgba(239, 77, 82, 0.2); }

.zw-btn.sm { padding: 5px 10px; font-size: 12px; gap: 6px; }
.zw-btn.lg { padding: 12px 18px; font-size: 14px; }
.zw-btn.icon { padding: 8px; }

/* Inputs */
.zw-input {
  background: var(--bg-1);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font: inherit;
  color: var(--text-primary);
  width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.zw-input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-glow);
}
.zw-input::placeholder { color: var(--text-tertiary); }

/* Heading scale */
.zw h1, .zw h2, .zw h3, .zw h4, .zw p { margin: 0; }
.zw h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.zw h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.zw h3 { font-size: 15px; font-weight: 600; }
.zw h4 { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }

/* Tables */
.zw-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.zw-table th {
  text-align: right;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-1);
  position: sticky;
  top: 0;
}
.zw-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}
.zw-table tbody tr:hover { background: var(--bg-3); }
.zw-table tbody tr:last-child td { border-bottom: 0; }

/* Phosphor-style stroke icons inherit currentColor */
.zw-icon { width: 18px; height: 18px; flex-shrink: 0; }
.zw-icon.sm { width: 14px; height: 14px; }
.zw-icon.lg { width: 22px; height: 22px; }

/* ── Touch / PWA global — no tap flash, no callout ─────────────────────── */
.zw * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
/* Disable accidental text selection everywhere (PWA feel) */
.zw {
  -webkit-user-select: none;
  user-select: none;
}
/* But keep selection enabled inside form fields */
.zw input,
.zw textarea,
.zw [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* ── Mobile layout shell ────────────────────────────────────────────────── */
/* Bottom nav bar — fixed at bottom with safe-area support */
.zw-mobile-bottomnav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg-1);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: stretch;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Mobile content area pushes above bottom nav */
.zw-mobile-content {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

/* Mobile topbar safe-area top padding */
.zw-mobile-topbar {
  padding-top: env(safe-area-inset-top, 0px);
}

/* ── Mobile media overrides ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Thinner scrollbars */
  .zw ::-webkit-scrollbar { width: 3px; height: 3px; }

  /* Larger tap targets */
  .zw-btn        { min-height: 44px; }
  .zw-btn.sm     { min-height: 36px; padding: 6px 12px; }
  .zw-btn.icon   { min-height: 44px; min-width: 44px; padding: 10px; }
  .zw-input      { min-height: 44px; }

  /* Tables: compact + horizontal scroll */
  .zw-table      { font-size: 12px; }
  .zw-table th   { padding: 8px 10px; font-size: 10px; }
  .zw-table td   { padding: 10px 10px; }

  /* Cards: smaller radius on mobile */
  .zw-card       { border-radius: var(--r-md); }

  /* Compact chip */
  .zw-chip       { font-size: 10px; padding: 2px 6px; }
}