/* Rattib site — shared base: self-hosted fonts, design tokens (Claude-Design/rattib-2026-11-01/README.md → Tokens),
   light/dark theme. Theme: follows prefers-color-scheme; /assets/theme.js sets html[data-theme] when the visitor
   picks one (remembered in localStorage). Without JavaScript the system setting applies. */
@font-face { font-family: 'Plex Arabic'; font-weight: 400; font-display: swap; src: url(/assets/fonts/plex-arabic-400-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Plex Arabic'; font-weight: 400; font-display: swap; src: url(/assets/fonts/plex-arabic-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plex Arabic'; font-weight: 600; font-display: swap; src: url(/assets/fonts/plex-arabic-600-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Plex Arabic'; font-weight: 600; font-display: swap; src: url(/assets/fonts/plex-arabic-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plex Arabic'; font-weight: 700; font-display: swap; src: url(/assets/fonts/plex-arabic-700-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Plex Arabic'; font-weight: 700; font-display: swap; src: url(/assets/fonts/plex-arabic-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
/* The riyal sign U+20C1 (SaudiRiyal font subset, SIL OFL — fonts/SaudiRiyal-OFL.txt). */
@font-face { font-family: 'Riyal'; font-weight: 100 500; font-display: block; src: url(/assets/fonts/riyal-400.woff2) format('woff2'); unicode-range: U+20C1; }
@font-face { font-family: 'Riyal'; font-weight: 600 900; font-display: block; src: url(/assets/fonts/riyal-700.woff2) format('woff2'); unicode-range: U+20C1; }

:root {
  color-scheme: light;
  --bg: #F5F4F0; --surf: #FFFFFF; --surf2: #ECEBE6; --line: #E3E1DA; --line2: #CDCAC0;
  --ink: #15171C; --ink2: #33363D; --ink3: #575B64;
  --pri: #2F3FCE; --onPri: #FFFFFF; --priSoft: #E3E6FB;
  --acc: #E4572E; --accT: #AE3714; --accSoft: #FBE3DA;
  --ok: #1E7A4C; --warn: #875800; --warnBg: #FAEBC8;
  --hero: radial-gradient(120% 90% at 70% 30%, #4553E0 0%, #2F3FCE 45%, #1B2797 100%);
  --bezel: #111318;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0F1115; --surf: #181B21; --surf2: #23272F; --line: #2A2E37; --line2: #3E4350;
    --ink: #F2F3F5; --ink2: #D9DBE0; --ink3: #A8ACB6;
    --pri: #9AA6FF; --onPri: #0B1040; --priSoft: rgba(154,166,255,.15);
    --acc: #FF8A63; --accT: #FFA585; --accSoft: rgba(255,138,99,.15);
    --ok: #6FD69C; --warn: #F3C567; --warnBg: rgba(243,197,103,.13);
    --hero: radial-gradient(120% 90% at 70% 30%, #2A35A8 0%, #141A5C 55%, #0B0E2E 100%);
    --bezel: #2A2E37;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0F1115; --surf: #181B21; --surf2: #23272F; --line: #2A2E37; --line2: #3E4350;
  --ink: #F2F3F5; --ink2: #D9DBE0; --ink3: #A8ACB6;
  --pri: #9AA6FF; --onPri: #0B1040; --priSoft: rgba(154,166,255,.15);
  --acc: #FF8A63; --accT: #FFA585; --accSoft: rgba(255,138,99,.15);
  --ok: #6FD69C; --warn: #F3C567; --warnBg: rgba(243,197,103,.13);
  --hero: radial-gradient(120% 90% at 70% 30%, #2A35A8 0%, #141A5C 55%, #0B0E2E 100%);
  --bezel: #2A2E37;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink2);
  font: 400 16px/1.75 'Riyal', 'Plex Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
a { color: var(--pri); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; inset-inline-start: -999px; }
.skip:focus { inset-inline-start: 12px; top: 12px; background: var(--surf); color: var(--ink); padding: 8px 12px; border-radius: 12px; z-index: 50; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; vertical-align: middle; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header controls shared by every page: language link + theme button (shown by theme.js). */
.ctl { all: unset; box-sizing: border-box; height: 42px; min-width: 42px; padding: 0 12px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 400;
  cursor: pointer; color: var(--ink2); text-decoration: none; white-space: nowrap; }
.ctl:hover { background: var(--surf2); color: var(--ink2); }
.ctl:active { background: var(--line); }
.ctl:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.ctl .ic { width: 20px; height: 20px; }
.theme-btn { padding: 0; }
.theme-btn[hidden] { display: none; }
.theme-btn .to-light { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .to-light { display: block; } :root:not([data-theme="light"]) .theme-btn .to-dark { display: none; } }
:root[data-theme="dark"] .theme-btn .to-light { display: block; }
:root[data-theme="dark"] .theme-btn .to-dark { display: none; }

/* Theme-specific images: only the visible one loads (lazy + display:none). */
.only-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .only-dark { display: block; } :root:not([data-theme="light"]) .only-light { display: none; } }
:root[data-theme="dark"] .only-dark { display: block; }
:root[data-theme="dark"] .only-light { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}