/* IQRA design tokens — colors, typography, spacing, shape. */
:root {
  /* Surfaces */
  --paper: #F7F2E7;
  --surface: #FFFCF4;
  --surface-2: #F6ECCE;

  /* Ink */
  --ink: #2B2A26;
  --ink-soft: #4A463E;
  --ink-faint: #7A7261;

  /* Lines */
  --line: #CFC4A8;
  --line-strong: #8F8263;

  /* Blue — navigation & information */
  --blue: #2E6DA4;
  --blue-deep: #24577F;
  --blue-soft: #E5EDF5;

  /* Saffron — glossary highlight & cultural warmth */
  --saffron: #B07D1F;
  --saffron-soft: #F7EED6;
  --saffron-deep: #8A6116;

  /* Green — correct */
  --green: #4A7A4E;
  --green-deep: #365E39;
  --green-soft: #E7EFE3;

  /* Red — incorrect */
  --red: #B03A2D;
  --red-deep: #7C271F;
  --red-soft: #F5E2DD;

  --shadow:
    0 1px 2px rgba(31, 39, 51, .06),
    0 8px 24px -12px rgba(31, 39, 51, .18);

  /* Homepage dashboard (dark frame + light panel) — homepage view only */
  --dash-navy: #1C293A;
  --dash-navy-2: #163a5f;
  --dash-panel: #FDFBF6;
  --dash-gold: #D99A2B;
  --violet: #7A5A90;
  --violet-soft: #ECE6F1;

  /* Typography roles */
  --display-font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --reading-font: "Source Serif 4", Georgia, "Times New Roman", serif;
  --arabic-font: "Noto Naskh Arabic", "Segoe UI", serif;
  --utility-font: "Spline Sans Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --hand-font: "Dancing Script", "Comic Sans MS", cursive;

  /* Reading size (user adjustable) */
  --passage-size: 19.5px;
  --passage-leading: 1.78;

  /* Spacing scale */
  --s-4: 4px;   --s-6: 6px;   --s-8: 8px;   --s-10: 10px;
  --s-12: 12px; --s-14: 14px; --s-16: 16px; --s-20: 20px;
  --s-24: 24px; --s-28: 28px; --s-32: 32px; --s-40: 40px;
  --s-52: 52px; --s-80: 80px;

  /* Shape */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --pill: 999px;

  --topbar-h: 104px;
  --rail-w: 316px;
  --reading-max: 66ch;
}