/* =============================================================================
   SudaHub redesign — self-hosted webfonts (CLAUDE.md §3), subset with
   fonttools pyftsubset. See fonts/LICENSE.txt for OFL attribution.
   Absolute /fonts/... paths so this resolves the same regardless of how deep
   the including page lives (index.html at root, dev/kitchen-sink.html one
   level down, etc.) — all three deploy targets (local dev server, Vercel,
   Capacitor native assets) serve fonts/ and css/ from the same top level.
   ========================================================================== */

/* Inter — Latin UI face (RESKIN §3.2). Suits the new density and is the
   mockup's own choice.

   ⚠ THE BINARIES ARE NOT IN THE REPO YET. --font-latin falls back to
   system-ui (SF Pro on iOS, Roboto on Android) until they are, which
   renders correctly but is not the intended face — metrics differ enough
   to shift the tight 2.8px-base rhythm slightly. To finish this:
       Inter-{400,500,600,700}.woff2 → www/fonts/, subset with pyftsubset
       (Latin + Latin-Ext only; Inter has no Arabic and must never be asked
       to render it), then uncomment the four @font-face rules below.
   Left commented rather than declared-and-404ing so the fallback is clean.

@font-face { font-family: 'Inter'; src: url('/fonts/Inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
*/

/* Outfit — wordmark only under the reskin (was: Latin display face) */
@font-face { font-family: 'Outfit'; src: url('/fonts/Outfit-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/fonts/Outfit-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/fonts/Outfit-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Outfit'; src: url('/fonts/Outfit-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* IBM Plex Sans Arabic — all Arabic UI text and headlines */
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/fonts/IBMPlexSansArabic-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/fonts/IBMPlexSansArabic-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/fonts/IBMPlexSansArabic-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Sans Arabic'; src: url('/fonts/IBMPlexSansArabic-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* IBM Plex Mono — every number, label, timestamp, feed ID */
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Noto Naskh Arabic — book bodies only. Declaring @font-face costs nothing
   until something actually renders text with --font-reading, so this loads
   lazily and for real only when the Library reader is open. */
@font-face { font-family: 'Noto Naskh Arabic'; src: url('/fonts/NotoNaskhArabic-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Naskh Arabic'; src: url('/fonts/NotoNaskhArabic-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
    --font-brand:   'Outfit', system-ui, sans-serif;
    --font-ar:      'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
    /* IBM Plex Sans Arabic as the fallback (not system-ui) is deliberate — Plex
       Mono and Plex Sans Arabic are drawn as one family, so Arabic characters
       that land inside a mono label (e.g. "تحديث: ٢ د" in a timestamp) still read
       as part of the same visual voice instead of jumping to a system font. */
    --font-mono:    'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, 'SF Mono', monospace;
    --font-reading: 'Noto Naskh Arabic', 'Amiri', Georgia, serif;
}

body {
    font-family: var(--font-brand);
}
/* Arabic UI takes over the whole subtree once [lang="ar"] is set on <html> —
   Outfit has no Arabic glyphs and would fall back silently. font-mono keeps
   its own family everywhere (its Arabic fallback is baked into --font-mono
   above), so it's deliberately left out of this override. */
[lang="ar"] body, [lang="ar"] { font-family: var(--font-ar); }

/* §3: "Arabic body weight is 500 on dark. Thin Arabic strokes vanish against
   navy." A baseline weight, not a forced one — inherits down to prose text
   that has no weight of its own, while headings/labels/buttons keep
   whatever heavier explicit weight they already set. Scoped to the app's
   own dark theme, not the reader: Noto Naskh Arabic (reader-only, §7.4) has
   no 500 weight file, only 400/700, so this wouldn't do anything useful
   there anyway. */
[data-theme="dark"] [lang="ar"] { font-weight: 500; }

/* Never uppercase or letter-space Arabic — uppercase has no meaning in the
   script and letter-spacing breaks the connected letterforms. */
[lang="ar"] .uppercase { text-transform: none; }
[lang="ar"] * { letter-spacing: 0 !important; }

/* Every number, label, and piece of metadata is mono — keep digits aligned. */
.font-mono { font-variant-numeric: tabular-nums; }