/* Copied from Leads7 public/app.css (main @ 39d0150, 2026-10-22): design tokens,
   dark theme, base, buttons, inputs — so Lougha Books looks like Leads7.
   Edit Lougha Books styles in store.css / admin.css, not here. */
:root, [data-theme="light"] {
  /* ─── Brand & accent ─── */
  --wa: #25d366;
  --wa-dark: #1da851;
  --wa-soft: oklch(0.85 0.18 150 / 0.18);
  --lougha: #10b7e2;
  --lougha-soft: oklch(0.85 0.10 220 / 0.18);

  /* Single accent — electric cobalt. Used for focus, primary actions,
     active states, links. Color = affordance, not decoration. */
  --accent: oklch(0.52 0.24 264);
  --accent-hover: oklch(0.46 0.24 264);
  --accent-strong: oklch(0.42 0.24 264);
  --accent-soft: oklch(0.52 0.24 264 / 0.10);
  --accent-fg: #ffffff;

  /* ─── Surfaces (warm cream → less harsh for 8h/day operators) ─── */
  --bg: oklch(0.99 0.005 75);
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-sunken: oklch(0.97 0.006 75);
  --surface-hover: oklch(0.965 0.006 75);
  --surface-active: oklch(0.95 0.008 75);

  /* ─── Borders ─── */
  --border: oklch(0.92 0.004 250);
  --border-strong: oklch(0.86 0.005 250);
  --border-subtle: oklch(0.94 0.003 250);

  /* ─── Text ─── */
  --text: oklch(0.18 0.012 250);
  --text-secondary: oklch(0.40 0.010 250);
  --text-tertiary: oklch(0.55 0.008 250);
  --text-muted: oklch(0.65 0.006 250);
  --text-inverse: oklch(0.98 0.005 75);

  /* ─── Status (muted but legible — same hue both themes) ─── */
  --success: oklch(0.60 0.16 150);
  --success-soft: oklch(0.60 0.16 150 / 0.12);
  --warning: oklch(0.72 0.16 75);
  --warning-soft: oklch(0.72 0.16 75 / 0.14);
  --danger: oklch(0.58 0.22 25);
  --danger-soft: oklch(0.58 0.22 25 / 0.10);
  --info: oklch(0.60 0.15 230);
  --info-soft: oklch(0.60 0.15 230 / 0.12);

  /* ─── Gray ramp (back-compat — kept for the 4500-line stylesheet that
       references --gray-XXX directly. Values map to a perceptually-even
       OKLCH ramp; dark theme flips them so legacy code re-themes for free.) */
  --gray-50: oklch(0.985 0.003 75);
  --gray-100: oklch(0.965 0.005 75);
  --gray-200: oklch(0.92 0.004 250);
  --gray-300: oklch(0.85 0.005 250);
  --gray-400: oklch(0.68 0.010 250);
  --gray-500: oklch(0.55 0.010 250);
  --gray-600: oklch(0.42 0.010 250);
  --gray-700: oklch(0.30 0.012 250);
  --gray-800: oklch(0.22 0.012 250);
  --gray-900: oklch(0.15 0.012 250);

  /* ─── Legacy accent colors (kept for components that hard-code them) ─── */
  --indigo-500: #6366f1;
  --pink-500: #ec4899;
  --blue-500: #3b82f6;
  --orange-500: #f97316;
  --violet-500: #8b5cf6;
  --amber-500: #f59e0b;
  --red-500: #ef4444;
  --purple-600: #7e22ce;
  --green-500: #16a34a;
  --green-600: #15803d;

  /* ─── Avatar palette (OKLCH-balanced, equal lightness) ─── */
  --av-1: oklch(0.62 0.18 264);
  --av-2: oklch(0.62 0.18 220);
  --av-3: oklch(0.62 0.16 150);
  --av-4: oklch(0.62 0.18 310);
  --av-5: oklch(0.62 0.18 350);
  --av-6: oklch(0.65 0.16 60);
  --av-7: oklch(0.62 0.14 180);
  --av-8: oklch(0.62 0.16 200);

  /* ─── Geometry ─── */
  --sidebar-w: 360px;
  --topbar-h: 56px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --radius-bubble: 14px;

  /* ─── Shadows (subtle in light, pronounced in dark) ─── */
  --shadow-sm: 0 1px 2px oklch(0.15 0.012 250 / 0.04);
  --shadow: 0 1px 3px oklch(0.15 0.012 250 / 0.05), 0 4px 12px oklch(0.15 0.012 250 / 0.04);
  --shadow-lg: 0 12px 32px oklch(0.15 0.012 250 / 0.10), 0 4px 12px oklch(0.15 0.012 250 / 0.06);

  /* ─── Typography ─── */
  --font-sans: 'Geist', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, "Times New Roman", serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, monospace;

  /* ─── Motion ─── */
  --ease: cubic-bezier(0.2, 0.0, 0.0, 1);
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-slow: 280ms;

  /* ─── Focus + card elevation (ported from support2 Book-class flagship) ─── */
  --focus: var(--wa);
  --focus-w: 2px;
  --elevation-card: var(--shadow-sm);

}
/* ─── Dark theme overrides ──────────────────────────────────────────────
   Same token names, different values. Manual override via the topbar
   toggle (writes data-theme + localStorage). On first load with no saved
   preference, the inline <head> script honours OS prefers-color-scheme. */
[data-theme="dark"] {
  /* Surfaces — cool charcoal, layered for depth */
  --bg: oklch(0.16 0.008 250);
  --surface: oklch(0.20 0.008 250);
  --surface-elevated: oklch(0.24 0.010 250);
  --surface-sunken: oklch(0.18 0.008 250);
  --surface-hover: oklch(0.25 0.010 250);
  --surface-active: oklch(0.28 0.012 250);

  /* Borders — visible but quiet */
  --border: oklch(0.28 0.010 250);
  --border-strong: oklch(0.38 0.012 250);
  --border-subtle: oklch(0.24 0.010 250);

  /* Text — warm whites */
  --text: oklch(0.96 0.005 75);
  --text-secondary: oklch(0.78 0.008 250);
  --text-tertiary: oklch(0.62 0.010 250);
  --text-muted: oklch(0.48 0.010 250);
  --text-inverse: oklch(0.18 0.012 250);

  /* Accent — slightly brighter for dark-bg contrast */
  --accent: oklch(0.70 0.22 264);
  --accent-hover: oklch(0.76 0.22 264);
  --accent-strong: oklch(0.62 0.22 264);
  --accent-soft: oklch(0.70 0.22 264 / 0.20);

  /* Status — brightness pivot for AA contrast on charcoal */
  --success: oklch(0.72 0.16 150);
  --success-soft: oklch(0.72 0.16 150 / 0.18);
  --warning: oklch(0.82 0.15 75);
  --warning-soft: oklch(0.82 0.15 75 / 0.18);
  --danger: oklch(0.72 0.20 25);
  --danger-soft: oklch(0.72 0.20 25 / 0.20);
  --info: oklch(0.74 0.16 230);
  --info-soft: oklch(0.74 0.16 230 / 0.18);

  /* Gray ramp — flipped so var(--gray-900) text stays light in dark mode */
  --gray-50: oklch(0.22 0.010 250);
  --gray-100: oklch(0.26 0.010 250);
  --gray-200: oklch(0.32 0.010 250);
  --gray-300: oklch(0.42 0.010 250);
  --gray-400: oklch(0.55 0.010 250);
  --gray-500: oklch(0.66 0.008 250);
  --gray-600: oklch(0.76 0.008 250);
  --gray-700: oklch(0.86 0.006 250);
  --gray-800: oklch(0.92 0.005 75);
  --gray-900: oklch(0.96 0.005 75);

  /* Brand soft tints — slightly stronger to remain visible on dark surfaces */
  --wa-soft: oklch(0.72 0.16 150 / 0.20);
  --lougha-soft: oklch(0.72 0.14 220 / 0.20);

  /* Shadows — black with more diffusion (dark surfaces eat soft shadows) */
  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.30);
  --shadow: 0 1px 3px oklch(0 0 0 / 0.45), 0 4px 14px oklch(0 0 0 / 0.30);
  --shadow-lg: 0 16px 40px oklch(0 0 0 / 0.55), 0 4px 14px oklch(0 0 0 / 0.40);

}

/* ─── Theme-toggle button — sun visible in dark mode, moon in light. */
.theme-toggle { color: var(--text-secondary); transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); }
.theme-toggle:hover { color: var(--text); background: var(--surface-hover); }
.theme-toggle .theme-icon { display: none; }
[data-theme="light"] .theme-toggle .theme-icon-dark,
:root:not([data-theme="dark"]) .theme-toggle .theme-icon-dark { display: inline-flex; }
[data-theme="dark"] .theme-toggle .theme-icon-light { display: inline-flex; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: var(--font-sans); color: var(--text); background: var(--bg); transition: background var(--motion-normal) var(--ease), color var(--motion-normal) var(--ease); }
body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
.muted { color: var(--gray-500); }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.mb12 { margin-bottom: 12px; }
.mobile-only { display: none; }
@media (max-width: 768px) { .mobile-only { display: inline-flex; } }

/* ─── Lucide icon defaults ─── */
[data-lucide] { width: 18px; height: 18px; stroke-width: 2; }
.icon-btn [data-lucide] { width: 18px; height: 18px; }
.icon-btn-sm [data-lucide] { width: 14px; height: 14px; }

/* ─── Buttons (H1: 3-tier height system) ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all 0.15s;
  background: transparent; color: var(--gray-700);
}
.btn:hover { background: var(--gray-100); }
.btn-primary { background: var(--wa); color: #fff; border-color: transparent; }
.btn-primary:hover { background: var(--wa-dark); }
.btn-ghost { color: var(--gray-600); background: var(--gray-100); }
.btn-ghost:hover { background: var(--gray-200); color: var(--gray-900); }
.btn-block { width: 100%; }
.btn-lg { height: 42px; padding: 0 18px; font-size: 14px; font-weight: 600; }
.btn:disabled, .btn[disabled] {
  opacity: 0.5; cursor: not-allowed; filter: saturate(0.6); pointer-events: none;
}
.btn-primary:disabled { background: var(--gray-300); color: #fff; }
.btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; background: transparent;
  border-radius: var(--radius-sm); color: var(--gray-500); cursor: pointer;
  font-family: inherit;
  transition: all 0.15s; position: relative;
}
.icon-btn:hover { background: var(--gray-100); color: var(--gray-700); }
.icon-btn:disabled { cursor: not-allowed; opacity: .5; }
.icon-btn.is-loading [data-lucide] { animation: lbSpin .8s linear infinite; }
@keyframes lbSpin { to { transform: rotate(360deg); } }
.icon-btn-primary { background: var(--wa); color: #fff; }
.icon-btn-primary:hover { background: var(--wa-dark); color: #fff; }
.icon-btn-sm {
  width: 26px; height: 26px;
  border: 0; background: transparent; border-radius: 6px;
  color: var(--gray-400); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn-sm:hover { background: var(--gray-200); color: var(--gray-700); }

/* Tooltip */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--gray-900); color: #fff; padding: 4px 8px; border-radius: 6px;
  font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.15s; z-index: 100;
}
.tip:hover::after { opacity: 1; }

.with-badge { position: relative; }
.badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--amber-500); color: #fff;
  font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ─── Inputs ─── */
.input {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px; color: var(--text); background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s; outline: none;
}
.input::placeholder { color: var(--text-muted); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input:disabled { background: var(--surface-sunken); color: var(--text-tertiary); cursor: not-allowed; }

/* ─── Screens / layout ─── */