/* quran-atlas/assets/css/base.css
   Shared design tokens for every Quran Atlas web page (landing, FAQ, privacy,
   support, import). Single source of truth so the five pages can't drift into
   separate design systems again.

   Values are pulled directly from the app's own app/constants/theme.ts, with one
   deliberate correction: dark mode's accent uses the app's own
   PRIMARY_GOLD_MUTE_DARK formula (mixHexColors('#D2B55B', '#294564', 0.20) =
   #B09F5D) instead of the raw DARK_THEME.accent (#D2B55B) — that raw value is
   flagged in the app's own PillButton.tsx as "reported as reading too
   bright/saturated" when used as a flat fill/icon, confirmed by direct visual
   comparison before this value was chosen. */

@font-face { font-family:'Inter'; src:url('../fonts/Inter-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/Inter-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../fonts/Inter-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/IBMPlexSansArabic-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/IBMPlexSansArabic-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'UthmanicHafs'; src:url('../fonts/UthmanicHafs.woff2') format('woff2'); font-weight:400; font-display:swap; }

:root {
  /* LIGHT_THEME (app/constants/theme.ts) */
  --ink: #0B1220;
  --ink-2: #121D33;
  --ink-3: #182746;
  --paper: #EAF1FB;
  /* Was pure #FFFFFF — every "white" box (search box, cards, pill-btn
     hover) read as flatly white against this page's blue gradient
     background, reported directly. Switched to the app's own real
     surfaceCard value (LIGHT_THEME.surfaceCard, "slightly off-white card
     bg") rather than inventing a new tint — same light-blue-off-white the
     app itself uses for topic/pack cards. */
  --paper-2: #FAFCFE;
  --paper-3: #F5F9FF;

  --accent: #2B5FA0;        /* LIGHT_THEME.accent / iconPrimary */
  --accent-soft: #6D9EF5;
  --accent-dim: #2C5FCB;
  --accent-secondary: #326499; /* LIGHT_THEME.accentSecondary */
  --mist: #D6E4F0;

  --bg: #CCDCEC;             /* LIGHT_THEME.background — flat page color */
  /* Slightly lighter than GRADIENTS.light.background's raw #B8CEEA — the
     darker top-of-page stop read a bit heavy, reported directly. Same
     hue/saturation, only lightness raised (~213°, ~54% sat, L 0.82→0.85),
     so it stays the same blue rather than drifting toward gray or green. */
  --bg-grad-1: #C4D6ED;
  --bg-grad-2: #CCE0F4;
  --bg-grad-3: #E4F0FC;

  --surface: var(--paper-2);
  --surface-2: var(--paper-3);
  --card: var(--paper-2);   /* was a separate literal #FFFFFF — same fix, same value */
  --border: rgba(31,78,138,0.14);
  --border-solid: #B0C8DE;

  --hero-title: #1e4985;     /* LIGHT_THEME.textHeroOnLight — "softer than pure black" */
  --heading: #1e4985;        /* section headings match the hero title color */
  --text-primary: #1F4E8A;
  --text-secondary: #4D6076;
  --text-muted: #5E7891;

  --cta-fill: var(--accent);
  --cta-label: #FFFFFF;

  --hero-image: url('../img/bg-light.svg');
  --shadow: 0 20px 60px -30px rgba(31,78,138,0.35);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1B2B;           /* DARK_THEME.background */
    --bg-grad-1: #000720;    /* GRADIENTS.dark.background */
    --bg-grad-2: #020B27;
    --bg-grad-3: #051747;

    --surface: var(--ink-2);
    --surface-2: var(--ink-3);
    --card: #294564;         /* DARK_THEME.card */
    --border: rgba(214,228,240,0.14);
    --border-solid: #2A4560;

    --accent: #B09F5D;       /* muted-gold correction — see file header */
    --accent-soft: #C7B685;
    --accent-dim: #9C8B52;
    --accent-secondary: #7BAFD4; /* DARK_THEME.accentSecondary */

    --hero-title: #C8DCF0;   /* DARK_THEME.textBlueSoft — more blue-tinted than
                                 textHeroOnDark (#D6E4F0), reads less "white" */
    --heading: #C8DCF0;
    --text-primary: var(--mist);
    --text-secondary: #9EB4C6; /* DARK_THEME.textMuted */
    --text-muted: #7A9BBC;     /* DARK_THEME.textOnDarkMuted */

    --cta-fill: var(--accent);
    --cta-label: #0B1B2B;     /* DARK_THEME.background — matches PillButton's own
                                 isDark ? C.background : C.textBright label rule */

    --hero-image: url('../img/bg-dark.svg');
    --shadow: 0 20px 70px -28px rgba(0,0,0,0.65);
  }
}
:root[data-theme="dark"] {
  --bg: #0B1B2B;
  --bg-grad-1: #000720;
  --bg-grad-2: #020B27;
  --bg-grad-3: #051747;
  --surface: var(--ink-2);
  --surface-2: var(--ink-3);
  --card: #294564;
  --border: rgba(214,228,240,0.14);
  --border-solid: #2A4560;
  --accent: #B09F5D;
  --accent-soft: #C7B685;
  --accent-dim: #9C8B52;
  --accent-secondary: #7BAFD4;
  --hero-title: #C8DCF0;
  --heading: #C8DCF0;
  --text-primary: var(--mist);
  --text-secondary: #9EB4C6;
  --text-muted: #7A9BBC;
  --cta-fill: var(--accent);
  --cta-label: #0B1B2B;
  --hero-image: url('../img/bg-dark.svg');
  --shadow: 0 20px 70px -28px rgba(0,0,0,0.65);
}
:root[data-theme="light"] {
  --bg: #CCDCEC;
  --bg-grad-1: #C4D6ED;
  --bg-grad-2: #CCE0F4;
  --bg-grad-3: #E4F0FC;
  --surface: var(--paper-2);
  --surface-2: var(--paper-3);
  --card: var(--paper-2);
  --border: rgba(31,78,138,0.14);
  --border-solid: #B0C8DE;
  --accent: #2B5FA0;
  --accent-soft: #6D9EF5;
  --accent-dim: #2C5FCB;
  --accent-secondary: #326499;
  --hero-title: #1e4985;
  --heading: #1e4985;
  --text-primary: #1F4E8A;
  --text-secondary: #4D6076;
  --text-muted: #5E7891;
  --cta-fill: var(--accent);
  --cta-label: #FFFFFF;
  --hero-image: url('../img/bg-light.svg');
  --shadow: 0 20px 60px -30px rgba(31,78,138,0.35);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .35s ease, color .35s ease;
}
html[data-lang="ar"] body { font-family: 'IBM Plex Sans Arabic', sans-serif; }
html[data-lang="ar"] [data-en] { display:none; }
html[data-lang="en"] [data-ar] { display:none; }
/* default weight matches the existing FAQ/privacy/support pages (unchanged) — the new
   landing/import pages override this locally per "no bold anywhere" direction, rather
   than changing this shared default and silently altering already-shipped pages */
h1, h2, h3 { font-weight:700; text-wrap: balance; margin:0; }
html[data-lang="ar"] h1, html[data-lang="ar"] h2, html[data-lang="ar"] h3 { font-weight:600; }
p { margin:0; }
a { color: var(--accent); text-decoration:none; }
a:hover { color: var(--accent-dim); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}
button { font-family:inherit; cursor:pointer; }

.eyebrow {
  font-size: 12px; font-weight:600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); display:inline-flex; align-items:center; gap:8px;
}
html[data-lang="ar"] .eyebrow { letter-spacing: 0; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.prose { max-width: 65ch; }
html[data-lang="ar"] .prose { max-width: 72ch; }

/* ── Nav ── */
.nav {
  position: sticky; top:0; z-index:40;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav-row {
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 28px; max-width: 1080px; margin:0 auto; gap: 16px;
}
.brand { display:flex; align-items:center; gap:10px; }
/* Light mode only — the crescent's default vivid blue (same asset as the
   app icon) was reported as not sitting well against light mode's pale
   backgrounds. Muted via filter rather than swapping in a different asset,
   so it stays the exact same glossy/gradient artwork everywhere, just
   recolored. A first pass added hue-rotate(-15deg) to chase the playlist
   artwork's own grayer "Crescent, Blue & Sand" palette, but that also
   shifted the rendered hue from ~220° to ~206° (measured on the actual
   rendered pixels, not eyeballed) — enough to read as teal rather than
   blue, reported directly. Dropping the hue-rotate and relying on
   saturate/brightness alone keeps the same ~210-220° hue as the original
   asset and the site's own --accent (#2B5FA0, hue ~213°), just calmer and
   less glossy. Dark mode is explicitly untouched (filter:none below)
   since only light mode was reported as a problem. */
/* 40px/21px, not the original 30px/17px — matched to index.html's own
   brand lockup size (previously a local-only override there), so the logo
   at the top reads the same size on every page instead of noticeably
   smaller on faq/privacy/support, reported directly. */
.brand img { width:40px; height:40px; flex-shrink:0; object-fit:contain; filter: saturate(0.70) brightness(0.90); }
@media (prefers-color-scheme: dark) { .brand img { filter: none; } }
:root[data-theme="dark"] .brand img { filter: none; }
:root[data-theme="light"] .brand img { filter: saturate(0.70) brightness(0.90); }
html[data-lang="ar"] .brand img { transform: scaleX(-1); }
.brand span { font-weight:700; font-size:21px; letter-spacing:-0.01em; color:var(--text-primary); }
html[data-lang="ar"] .brand span { font-weight:600; }
.nav-actions { display:flex; align-items:center; gap:10px; }
.pill-btn {
  border: 1px solid var(--border-solid); background: var(--surface); color: var(--text-primary);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight:600;
  display:flex; align-items:center; gap:6px;
  /* Explicit height — without it, this button's height comes purely from
     its own content, so a themeToggle (22px icon), a langToggle/Help &
     Support (text, ~21px line-height), and a Home button (18px icon) each
     settled at a different natural height, most visibly the 18px Home
     icon rendering ~4px shorter than the 22px theme icon beside it,
     reported directly. Fixed height + align-items:center makes every
     variant the same height regardless of what's inside; width still
     varies naturally with content (text vs. icon-only), which is
     expected and fine. */
  height: 40px;
}
/* Light mode only — the app's own LIGHT_THEME.navigationActiveBackground
   (rgba(214,230,247,0.98), the light blue used to highlight the active
   tab in the app's bottom dock, a toggle-like selection surface). Was
   previously only applied on index.html itself, so its nav toggles
   (language/theme/Home/Help&Support) read a visibly different, more
   saturated blue than the same buttons on faq/privacy/support (which
   fell back to plain --surface) — reported directly as the pages not
   looking like the same website. Shared here instead so every page's
   toggles match. Dark mode is untouched (reverts to plain --surface). */
.pill-btn { background: rgba(214,230,247,0.98); }
:root[data-theme="dark"] .pill-btn { background: var(--surface); }
@media (prefers-color-scheme: dark) { .pill-btn { background: var(--surface); } }
.pill-btn:hover { border-color: var(--accent-soft); color: var(--accent); }

/* ── Buttons with an icon + label (App Store / Google Play / in-app CTAs) ── */
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:none; border-radius:12px; padding:14px 26px; font-size:15px; font-weight:600;
  font-family:inherit; cursor:pointer; white-space:nowrap;
}
html[data-lang="ar"] .icon-btn { font-size:16px; }
.icon-btn svg { display:block; flex-shrink:0; }
.icon-btn span { display:inline-flex; align-items:center; line-height:1; }
.icon-btn.primary { background: var(--cta-fill); color: var(--cta-label); }
.icon-btn.secondary { background: var(--card); color: var(--accent); border:1px solid var(--border-solid); }

/* ── Cards ── */
.card {
  background: var(--surface); border:1px solid var(--border); border-radius: 16px;
  padding: 22px; display:flex; flex-direction:column; gap: 10px;
}
.card .icon {
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); flex-shrink:0;
}
.card h3 { font-size:16px; color:var(--text-primary); }
.card p { color: var(--text-secondary); font-size: 14px; line-height:1.55; }
.card .go { font-size:13px; font-weight:600; color:var(--accent); margin-top:auto; display:flex; align-items:center; gap:6px; }
.card-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 16px; }
.card:hover { transform: translateY(-2px); border-color: var(--accent-soft); }
.card { transition: transform .18s ease, border-color .18s ease; }

footer { border-top:1px solid var(--border); padding: 36px 0 48px; }
.footer-row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center; }
.footer-links { display:flex; gap:18px; flex-wrap:wrap; }
.footer-links a { color: var(--text-secondary); font-size:13px; }
.footer-links a:hover { color:var(--accent); }
.footer-note { color: var(--text-muted); font-size:12px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}