/* Wahy Albayan — Design tokens
   Palette distilled from the logo (deep emerald book + gold ornament + ivory)
   and carried through to a warm cream canvas with Islamic manuscript accents. */

@font-face {
  font-family: "RB Regular";
  src: url("../assets/RB%20Regular/RB%20Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Greens — the book cover */
  --g-900: #072e18;
  --g-800: #0b3d22;
  --g-700: #0f4d2a;      /* primary emerald */
  --g-600: #1a6b3d;
  --g-500: #2d8a55;
  --g-400: #55a277;
  --g-300: #8cc2a5;
  --g-200: #c2dfd0;
  --g-100: #e4f0ea;
  --g-050: #f2f8f4;

  /* Golds — the ornament + calligraphy highlights */
  --y-900: #5f4516;
  --y-800: #8a6522;
  --y-700: #a88639;
  --y-600: #c9a961;      /* primary gold */
  --y-500: #d9bd7a;
  --y-400: #e6cf9a;
  --y-300: #efdeb8;
  --y-200: #f5e9cf;
  --y-100: #faf2e1;

  /* Neutrals — ivory manuscript */
  --c-ink: #1a1611;
  --c-ink-soft: #3b3428;
  --c-muted: #6b6252;
  --c-line: #e6dfce;
  --c-line-strong: #d6ccb4;
  --c-cream: #f5efde;
  --c-cream-2: #f5efde;
  --c-paper: #ffffff;

  /* Roles */
  --bg: var(--c-cream);
  --bg-elev: var(--c-paper);
  --bg-deep: var(--g-700);
  --fg: var(--c-ink);
  --fg-soft: var(--c-ink-soft);
  --fg-muted: var(--c-muted);
  --line: var(--c-line);
  --accent: var(--g-700);
  --accent-2: var(--y-600);

  /* Type — clean Cairo-based stack */
  --ff-ar-display: "RB Regular", "Cairo", system-ui, sans-serif;
  --ff-ar-ui: "RB Regular", "Cairo", system-ui, sans-serif;
  --ff-ar-quran: "Amiri", serif;
  --ff-en-display: "Inter", system-ui, sans-serif;
  --ff-en-ui: "Inter", system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Scale */
  --step--2: clamp(.72rem, .70rem + .1vw, .80rem);
  --step--1: clamp(.83rem, .81rem + .12vw, .92rem);
  --step-0:  clamp(.95rem, .92rem + .16vw, 1.05rem);
  --step-1:  clamp(1.10rem, 1.05rem + .25vw, 1.25rem);
  --step-2:  clamp(1.30rem, 1.22rem + .4vw, 1.55rem);
  --step-3:  clamp(1.60rem, 1.45rem + .8vw, 2.05rem);
  --step-4:  clamp(2.0rem, 1.7rem + 1.3vw, 2.8rem);
  --step-5:  clamp(2.6rem, 2.1rem + 2.2vw, 3.9rem);
  --step-6:  clamp(3.2rem, 2.4rem + 3.4vw, 5.4rem);
  --step-7:  clamp(4.0rem, 2.8rem + 4.8vw, 7.2rem);

  /* Radii / shadow */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  --sh-sm: 0 1px 2px rgba(26,22,17,.06), 0 1px 1px rgba(26,22,17,.04);
  --sh-md: 0 6px 18px rgba(26,22,17,.08), 0 2px 6px rgba(26,22,17,.04);
  --sh-lg: 0 24px 60px -18px rgba(15,77,42,.35), 0 10px 30px -12px rgba(26,22,17,.12);
  --sh-gold: 0 10px 30px -12px rgba(201,169,97,.55);

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-soft: cubic-bezier(.25,.46,.45,.94);
  --dur-xs: 120ms;
  --dur-s: 240ms;
  --dur-m: 420ms;
  --dur-l: 720ms;

  --container: 1240px;
  --container-wide: 1400px;
}

/* Dark variant, toggled by tweak */
[data-theme="dark"] {
  --bg: #0b1410;
  --bg-elev: #0f1c16;
  --bg-deep: #061810;
  --fg: #f3ece0;
  --fg-soft: #d8cfbd;
  --fg-muted: #a59d8a;
  --line: #1e2e24;
  --c-line-strong: #28382d;
  --c-cream: #0b1410;
  --c-cream-2: #0f1c16;
  --c-paper: #0f1c16;
}