/* Design tokens: fonts, colours per period, light and dark themes. */

@font-face { font-family: "Naskh"; src: url("../fonts/naskh-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Naskh"; src: url("../fonts/naskh-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Kufi"; src: url("../fonts/kufi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Hafs"; src: url("../fonts/hafs.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "AmiriQ"; src: url("../fonts/amiri-quran.woff2") format("woff2"); font-display: swap; }
/* Optional fonts the person can choose in Settings; a browser downloads a font only when it is used. */
@font-face { font-family: "Amiri"; src: url("../fonts/amiri-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Amiri"; src: url("../fonts/amiri-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("../fonts/cairo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cairo"; src: url("../fonts/cairo-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --font-body: "Naskh", "Noto Naskh Arabic", serif;
  --font-display: "Naskh", "Noto Naskh Arabic", serif;
  --font-quran: "Hafs", "AmiriQ", serif;
  --font-marker: "AmiriQ", serif;

  --bg: #F7F1E7;
  --surface: #FFFDF9;
  --surface-2: #F1E9DC;
  --ink: #2A2118;
  --muted: #6E6052;
  --line: #E4D9C8;
  --ok: #2E8B5E;
  --shadow: 0 1px 2px rgba(60, 40, 20, .06), 0 6px 20px rgba(60, 40, 20, .06);

  --acc: #A84A22;
  --acc-ink: #FFFFFF;
  --acc-soft: #F5E3D6;

  --fs: 1;
  --radius: 18px;
  --nav-h: 88px; /* replaced at runtime by the real bottom-bar height */
}

/* Font choices (Settings → خط العناوين / خط النصوص). The Quran always keeps the mushaf font. */
[data-font-head="kufi"]   { --font-display: "Kufi", "Naskh", sans-serif; }
[data-font-head="amiri"]  { --font-display: "Amiri", "Naskh", serif; }
[data-font-head="sans"]   { --font-display: "Cairo", system-ui, sans-serif; }
[data-font-head="system"] { --font-display: system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif; }
[data-font-body="amiri"]  { --font-body: "Amiri", "Naskh", serif; }
[data-font-body="sans"]   { --font-body: "Cairo", system-ui, sans-serif; }
[data-font-body="system"] { --font-body: system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif; }

[data-period="dhuhr"]   { --acc: #7A5E06; --acc-soft: #F3EACB; }
[data-period="asr"]     { --acc: #953A22; --acc-soft: #F4E0D7; }
[data-period="maghrib"] { --acc: #5A3D8C; --acc-soft: #E9E1F5; }
[data-period="sahar"]   { --acc: #2F4A7A; --acc-soft: #DFE7F4; }

[data-theme="dark"] {
  --bg: #10141C;
  --surface: #181E2A;
  --surface-2: #212937;
  --ink: #ECE5D6;
  --muted: #A79F8E;
  --line: #2B3444;
  --ok: #57C08D;
  --acc-ink: #10141C;
  --shadow: none;
}
[data-theme="dark"][data-period="fajr"]    { --acc: #E79A6B; --acc-soft: #3A2A22; }
[data-theme="dark"][data-period="dhuhr"]   { --acc: #E2C35A; --acc-soft: #363017; }
[data-theme="dark"][data-period="asr"]     { --acc: #EC8D6E; --acc-soft: #3A2520; }
[data-theme="dark"][data-period="maghrib"] { --acc: #B79BEA; --acc-soft: #2C2540; }
[data-theme="dark"][data-period="sahar"]   { --acc: #9DB9EE; --acc-soft: #1F2B44; }