/* Semantic tokens — Islamic Content Encyclopedia (values verbatim from the Figma Style Guide) */
:root{
  /* ---- Color: brand ---- */
  --color-primary: rgb(14,61,23);            /* Forest Green 800 — primary buttons, footer, links */
  --color-primary-hover: rgb(24,85,35);      /* Forest Green 700 */
  --color-accent: rgb(61,142,73);            /* Forest Green 500 */
  --color-accent-soft: rgb(224,245,222);     /* Forest Green 100 — selected chips, tints */
  --color-accent-mist: rgb(235,245,236);     /* Forest Green 50 */
  /* ---- Color: surfaces ---- */
  --surface-page: rgb(255,253,250);          /* Biege 50 — page background */
  --surface-card: rgb(255,255,255);
  --surface-cream: rgb(251,248,244);         /* Biege 100 */
  --surface-cream-2: rgb(247,244,240);       /* Biege 200 */
  --surface-sunken: rgb(240,236,230);        /* Biege 300 — section fills, wells */
  --surface-dark: rgb(15,49,49);             /* Default Dark 100 — dark teal panels */
  --surface-dark-2: rgb(42,72,72);           /* Default Dark 200 */
  /* ---- Color: text ---- */
  --text-strong: rgb(17,17,17);              /* Base Black */
  --text-body: rgb(17,17,17);
  --text-muted: rgb(77,80,82);               /* Grey 600 */
  --text-faint: rgb(122,124,125);            /* Grey 500 */
  --text-on-dark: rgb(255,255,255);
  --text-on-dark-soft: rgb(178,219,184);     /* Forest Green 200 on dark green */
  /* ---- Color: lines ---- */
  --border-default: rgb(233,233,233);        /* Grey 200 — 1px hairlines everywhere */
  --border-strong: rgb(17,17,17);            /* black keyline cards */
  --border-cream: rgb(240,236,230);
  /* ---- Color: semantic ---- */
  --color-danger: rgb(247,78,87);            /* Red 500 */
  --color-danger-strong: rgb(245,34,45);     /* Red 600 */
  --color-warning: rgb(224,168,12);          /* amber label */
  --color-gold: rgb(196,170,101);            /* gilded book/brand gold */
  --color-info: rgb(126,152,162);            /* Blue 600 (dusty slate) */
  /* Transparent primary (dark mode tints) */
  --tint-primary-100: rgba(150,223,153,0.08);
  --tint-primary-200: rgba(150,223,153,0.16);
  /* ---- Type ---- */
  --font-ui: "IBM Plex Sans Arabic", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Lyon Arabic Display", "Amiri", serif;
  --font-quran: "Amiri Quran", "Amiri", serif;
  --text-caption-sm: 400 12px/16px var(--font-ui);
  --text-caption-lg: 400 14px/20px var(--font-ui);
  --text-body-sm: 400 16px/24px var(--font-ui);
  --text-body-lg: 400 18px/36px var(--font-ui);
  --text-subheadline: 500 20px/36px var(--font-ui);
  --text-headline: 500 24px/32px var(--font-ui);
  --text-h4: 500 36px/48px var(--font-display);
  --text-h3: 500 40px/56px var(--font-display);
  --text-h2: 500 48px/64px var(--font-display);
  --text-h1: 500 56px/72px var(--font-display);
  /* ---- Radius ---- */
  --r-sm: 2px; --r: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-3xl: 20px; --r-4xl: 24px; --r-full: 9999px;
  /* ---- Spacing (px) ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-18: 72px; --sp-20: 80px; --sp-22: 88px; --sp-24: 96px; --sp-25: 100px; --sp-30: 120px; --sp-35: 140px; --sp-40: 160px; --sp-45: 180px; --sp-50: 200px;
  /* ---- Shadows (Effect styles) ---- */
  --shadow-modal: 0px 3px 15px 0px rgba(22,25,36,0.10);
  --shadow-card: 0px 1px 2px 0px rgba(0,0,0,0.05);
  --shadow-card-kanban: 0px 1.5px 5px 0px rgba(22,25,36,0.07);
  --shadow-button-secondary: 0px 1px 1.5px 0.1px rgba(22,25,36,0.03);
  --shadow-focus: 0px 0px 1px 2px rgba(132,189,58,0.15);
  --shadow-label-inset: inset 0px -1px 4px 0px rgba(22,25,36,0.2);
  --hairline: inset 0 0 0 1px var(--border-default);
}
body{margin:0;font:var(--text-body-sm);color:var(--text-body);background:var(--surface-page)}
a{color:var(--color-primary);text-decoration:none}
a:hover{color:var(--color-primary-hover)}