/* =========================================================
   Albayan design tokens — shared by every app.
   Light / sepia / dark themes are switched with
   <html data-theme="...">, set by lib/i18n.js.
   CSS custom properties cross shadow DOM boundaries,
   so Lit components read these directly.
   ========================================================= */

:root {
  --bb-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bb-font-ar: 'Noto Naskh Arabic', 'Figtree', serif;
  --bb-font-quran: 'Amiri Quran', 'Noto Naskh Arabic', serif;

  --bb-primary: #2ca4ab;
  --bb-primary-strong: #1f8a90;
  --bb-primary-soft: rgba(44, 164, 171, 0.12);
  --bb-on-primary: #ffffff;
  --bb-accent: #d9a441;

  --bb-bg: #ffffff;
  --bb-surface: #f6f7f8;
  --bb-surface-2: #eef0f2;
  --bb-elevated: #ffffff;
  --bb-text: #272727;
  --bb-muted: #6b7075;
  --bb-border: #e6e9ec;
  --bb-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);
  --bb-shadow-lg: 0 12px 40px rgba(16, 24, 40, 0.14);

  --bb-scroll-thumb: rgba(39, 39, 39, 0.22);
  --bb-scroll-thumb-hover: var(--bb-primary);

  --bb-radius-sm: 8px;
  --bb-radius: 14px;
  --bb-radius-lg: 22px;
  --bb-bar-h: 60px;
  --bb-gutter: 16px;
  --bb-max: 1120px;
  --bb-ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: light;
}

[data-theme="sepia"] {
  --bb-primary: #a5753a;
  --bb-primary-strong: #8a5f2c;
  --bb-primary-soft: rgba(165, 117, 58, 0.14);
  --bb-bg: #f8f0e3;
  --bb-surface: #f1e5d1;
  --bb-surface-2: #eadbc2;
  --bb-elevated: #fbf5ea;
  --bb-text: #2b2419;
  --bb-muted: #73644f;
  --bb-border: #e3d3b8;
  --bb-scroll-thumb: rgba(115, 100, 79, 0.35);
  color-scheme: light;
}

[data-theme="dark"] {
  --bb-primary: #3cbec5;
  --bb-primary-strong: #5fd0d6;
  --bb-primary-soft: rgba(60, 190, 197, 0.16);
  --bb-on-primary: #0f1416;
  --bb-accent: #e8b75a;
  --bb-bg: #1f2125;
  --bb-surface: #272a2f;
  --bb-surface-2: #30343a;
  --bb-elevated: #2b2e33;
  --bb-text: #e7e9ea;
  --bb-muted: #a3a8ae;
  --bb-border: #363a40;
  --bb-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
  --bb-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  --bb-scroll-thumb: rgba(231, 233, 234, 0.22);
  color-scheme: dark;
}

html {
  background: var(--bb-bg);
  color: var(--bb-text);
  font-family: var(--bb-font);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* horizontal swipes are used by the reels; keep the browser from navigating back */
  overscroll-behavior-x: none;
}

html[lang="ar"] { font-family: var(--bb-font-ar); }

body {
  background: var(--bb-bg);
  color: var(--bb-text);
  min-height: 100vh;
  transition: background-color .25s var(--bb-ease), color .25s var(--bb-ease);
}

::selection { background: var(--bb-primary-soft); }

/* ---------- Scrollbar: slim pill that matches the palette ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--bb-scroll-thumb);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
  min-height: 40px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--bb-scroll-thumb-hover); }
::-webkit-scrollbar-corner { background: transparent; }

@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--bb-scroll-thumb) transparent; }
}

/* Icon font (Google Material Symbols). */
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}