/* ============================================================================
   ouivisa.css — OuiVisa shared design system (SINGLE SOURCE OF TRUTH)
   Loaded LAST on every page so it governs the shared layer and pages can never
   drift again. Canonical values taken from the homepage (the gold standard).
   Page-specific styles (hero, map, tiles, facts, finder…) stay inline per page.
   Phase 0 (2026-07-08). Colors/tokens are already consistent site-wide; this
   file locks: fonts, type scale, container padding, logo, header controls, buttons.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700;800&display=swap');

/* ---- type system: one font stack, true 800 weight everywhere ---- */
:root{ --font-sans:'IBM Plex Sans Arabic','Segoe UI',system-ui,-apple-system,Roboto,'Noto Sans Arabic',Tahoma,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; }
body{ font-family:var(--font-sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-wrap:break-word; }
/* Arabic (RTL) — ONE treatment everywhere: 16px to match the homepage, with generous RTL leading.
   (overrides the visa pages' inline 17.5px override — that was the "Arabic looks different" cause) */
html[dir="rtl"] body{ font-size:16px; line-height:1.8; overflow-wrap:anywhere; }
h1,h2,h3,h4,h5,h6,button,input,select,textarea,optgroup{ font-family:var(--font-sans); }

/* ---- tokens this shared layer relies on — and the CONTRAST-AUDITED values (2026-07-16).
   This block loads last so it deliberately overrides every page's inline :root:
   · light --cta darkened #e05e00→#c25100 so white button text measures 4.7:1 (was 3.6);
   · dark --cta-ink switches to dark ink #31230c on the bright orange, 6.7:1 (white was 2.3) —
     the same pairing the language chip already uses;
   · --accent-strong = solid pill bg for white/-ink text (lang switch): 4.9:1 light;
   · dark --faint lightened #928877→#a29884 (was 4.4:1 on panels, now ≥5:1). ---- */
:root{ --accent-ink:#ffffff; --accent-strong:#a36100; --cta:#c25100; --cta2:#a84600; --cta-ink:#ffffff; }
html[data-theme="dark"]{ --accent-ink:#31230c; --accent-strong:#f6b03c; --cta:#ff8e3d; --cta2:#ffa96b; --cta-ink:#31230c; --faint:#a29884; }

/* ---- container: consistent edges (keep each page's own max-width) ---- */
.wrap{ padding-inline:18px; }
@media(max-width:640px){ .wrap{ padding-inline:15px; } }

/* ---- header: FULL canonical (homepage) so every page's bar is identical — background shade, height, logo, nav, language pill ---- */
header.nav{ background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(12px); }
.nav-in{ height:auto; padding:12px 0; gap:14px; }
.logo{ font-weight:600; letter-spacing:-.01em; font-size:19px; gap:9px; }
.logo b{ color:var(--accent-text,#8a5200); font-weight:600; } /* text-grade amber: 5.3:1 vs 3.1 with --accent */
.logo .dot{ display:none !important; }
.nav-links{ color:var(--muted); font-size:14.5px; }
/* language switch — bordered pill container + SOLID-orange active; works for <button> (home) AND <a>/<span> (generated pages) */
.lang{ display:flex; gap:4px; background:var(--panel); border:1px solid var(--border); padding:3px; border-radius:999px; }
.lang button,.lang a,.lang span{ appearance:none; border:0; background:transparent; color:var(--muted); cursor:pointer; padding:5px 11px; border-radius:999px; font:inherit; font-size:13px; font-weight:700; text-decoration:none; min-height:0; display:inline-flex; align-items:center; }
.lang .active,.lang button.active{ background:var(--accent-strong); color:var(--accent-ink); }

/* ---- theme toggle: round, bordered, canonical (Phase 2 will also align the glyph + position) ---- */
.theme-toggle{ appearance:none; border:1px solid var(--border); background:var(--panel); color:var(--text);
  cursor:pointer; width:44px; height:44px; border-radius:50%; font-size:15px; line-height:1; flex:0 0 auto; }
.theme-toggle:hover{ border-color:var(--cta); }
/* glyph is CSS-driven ☾/☀ so it swaps with the theme on EVERY page, regardless of the page's markup/JS
   (hides any inline ◐/emoji the generators printed; the existing click-JS still flips data-theme) */
.theme-toggle{ font-size:0; }
.theme-toggle::after{ content:"\263E"; font-size:15px; line-height:1; }
html[data-theme="dark"] .theme-toggle::after{ content:"\2600"; }

/* ---- buttons: canonical scale ---- */
.btn{ display:inline-block; border-radius:10px; padding:10px 18px; font-weight:700; font-size:14.5px; cursor:pointer; border:0; font-family:inherit; }
.btn-primary{ background:var(--cta); color:var(--cta-ink); } .btn-primary:hover{ background:var(--cta2); }
.btn-ghost{ background:transparent; border:1px solid var(--border); color:var(--text); } .btn-ghost:hover{ border-color:var(--accent); }

/* ---- a11y + motion safety (in case a page omits them) ---- */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } }