/* =====================================================================
   ARUUUBA App 2 · «Noor» — binding design tokens
   Source of truth for colour, type, shape and spacing in App 2.
   Components read these variables only; no hard-coded colours.
   Light is the default. Dark follows the app's existing theme switch
   (System / Light / Dark), applied as :root[data-theme="dark"].
   ===================================================================== */

/* ---------- self-hosted fonts (WOFF2, OFL) ----------
   Inter and Sora are already self-hosted in the app — reuse those files.
   Add IBM Plex Sans Arabic (400/500/600/700) and Noto Naskh Arabic (500/700,
   Arabic subset) as WOFF2 next to them. Do not load Google Fonts at runtime. */

:root{
  /* ground & surfaces — luminous ivory replaces the old olive grey */
  --bg:#FBFAF6; --bg2:#F3F1EA; --surface:#FFFFFF; --surface2:#FBFAF6;
  --line:#E8E4D9; --line2:#D9D3C5; --hair:#F0EDE5;

  /* ink */
  --ink:#10241D; --ink2:#3B4B44; --mute:#5F6C65; --faint:#8C978F;

  /* identity */
  --forest:#14463A; --forest2:#0E3A2F; --forest-t:#E5EFEA; --mint:#9ED6BE;
  --gold:#C29A3F; --gold-t:#F7EED8; --gold-i:#6B5113;

  /* Mosque OS workspace */
  --os:#0F3B31; --os2:#164A3E; --os-ink:#EAF2EE; --os-mute:#A9C7BB; --os-line:#24574A;

  /* status */
  --ok:#1C6438; --ok-t:#E3F2E8; --warn:#8A5A12; --warn-t:#FBF0DA; --err:#A3302A; --err-t:#FBE8E6;

  /* type families */
  --f-d:"Sora","Inter",system-ui,sans-serif;               /* display, numbers, times */
  --f-t:"Inter","IBM Plex Sans Arabic",system-ui,sans-serif;/* all UI text */
  --f-ar:"IBM Plex Sans Arabic","Inter",system-ui,sans-serif;/* any Arabic UI text */
  --f-q:"Noto Naskh Arabic","IBM Plex Sans Arabic",serif;   /* hadith and ayat only */

  /* type scale — desktop (px) */
  --fs-display:40; --fs-page:30; --fs-section:21; --fs-card:18.5; --fs-card-s:17;
  --fs-body:16; --fs-secondary:14.5; --fs-meta:13; --fs-eyebrow:11.5;
  /* nothing in the UI goes below 12px; every form field is 16px */

  /* shape */
  --r-xl:22px; --r-l:16px; --r-m:12px; --r-s:10px; --r-pill:999px;
  --frame:1px;                       /* every frame is 1px, all four sides */
  --sh1:0 1px 2px rgba(16,36,29,.04),0 4px 14px rgba(16,36,29,.04);
  --sh2:0 2px 4px rgba(16,36,29,.05),0 12px 32px rgba(16,36,29,.08);

  /* spacing scale */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* layout */
  --top-h:68px; --side-w:248px; --feed-w:640px; --rail-w:340px; --gap-col:32px;
  --os-side-w:264px; --os-item-h:40px; --os-icon:18px; --os-font:14.5px; --os-group-gap:18px;
  --tabbar-h:72px; --touch:44px;
}

/* mobile type scale */
@media (max-width:767px){
  :root{ --fs-display:28; --fs-page:24; --fs-section:19; --fs-card:17; --fs-card-s:16;
         --fs-body:15.5; --fs-secondary:14; --fs-meta:13; }
}

/* ---------- content kinds: t tint · e edge (1px frame) · i ink on tint · s solid ---------- */
.k-post  {--t:#EEF2E4;--e:#CDD7B6;--i:#43522B;--s:#5C704A}
.k-prog  {--t:#E3F2EE;--e:#AFD8CD;--i:#135A4F;--s:#1F7A6C}
.k-vol   {--t:#FAEBE4;--e:#EBC3B2;--i:#843820;--s:#B5542F}
.k-camp  {--t:#FCF0DD;--e:#EFCF9F;--i:#74450F;--s:#A35F12}
.k-poll  {--t:#ECEDF8;--e:#C8CBEC;--i:#363B86;--s:#5459B3}   /* Poll and Q&A */
.k-live  {--t:#FDE9E6;--e:#F2BDB5;--i:#922A21;--s:#C93A2E}
.k-notice{--t:#F7EED8;--e:#E6D19D;--i:#6B5113;--s:#9A7419}   /* urgent / platform notice */
.k-care  {--t:#ECEFF3;--e:#CBD2DA;--i:#384350;--s:#5C6878}   /* funeral support — always quiet grey */
.k-os    {--t:#E5EFEA;--e:#B4D1C5;--i:#1B4A3E;--s:#2C5A4D}

/* ---------- prayer hero: the sky of the current period ----------
   Choose the class from the EXISTING prayer time-state (no new clock). */
.sky-fajr   {background:linear-gradient(165deg,#DCE5F4 0%,#EFE5EA 55%,#FBEEDF 100%)} /* Subuh → Syuruk */
.sky-day    {background:linear-gradient(165deg,#E4F1F7 0%,#F1F7F2 55%,#FCFAF1 100%)} /* Syuruk → Asar  */
.sky-asr    {background:linear-gradient(165deg,#F9EBCB 0%,#FBF2DE 55%,#FDF9EF 100%)} /* Asar → Maghrib */
.sky-maghrib{background:linear-gradient(165deg,#F4CFB8 0%,#EED6DC 55%,#E2D8EE 100%)} /* Maghrib → Isyak */
.sky-isha   {background:linear-gradient(165deg,#13263A 0%,#1A3248 60%,#223D50 100%);color:#F3EEE2} /* Isyak → Subuh */

/* ---------- dark theme ---------- */
:root[data-theme="dark"]{
  --bg:#0E1A16; --bg2:#13211C; --surface:#15241F; --surface2:#13211C;
  --line:#27392F; --line2:#33493E; --hair:#1E2E28;
  --ink:#EAF2EE; --ink2:#C9D6CF; --mute:#A9BAB0; --faint:#7F928A;
  --forest:#7FC8A9; --forest2:#9ED6BE; --forest-t:#173A30; --mint:#9ED6BE;
  --gold:#D9B45A; --gold-t:#2E2614; --gold-i:#F0D9A0;
  --os:#0B2C24; --os2:#123A30;
  --ok:#8FD3A8; --ok-t:#16301F; --warn:#E9C27A; --warn-t:#2E2414; --err:#F0A49C; --err-t:#331A18;
  --sh1:none; --sh2:0 12px 32px rgba(0,0,0,.35);
}
/* dark kinds are derived from each kind's solid colour */
:root[data-theme="dark"] [class*="k-"]{
  --t:color-mix(in srgb,var(--s) 18%,#15241F);
  --e:color-mix(in srgb,var(--s) 42%,#15241F);
  --i:color-mix(in srgb,var(--s) 38%,#FFFFFF);
}
/* in dark, each sky keeps its hue at night-time depth; text uses --ink */
:root[data-theme="dark"] .sky-fajr   {background:linear-gradient(165deg,#1B2A3E 0%,#2A2634 55%,#33291F 100%)}
:root[data-theme="dark"] .sky-day    {background:linear-gradient(165deg,#16303A 0%,#17302A 55%,#1E2A22 100%)}
:root[data-theme="dark"] .sky-asr    {background:linear-gradient(165deg,#3A2E14 0%,#2E2816 55%,#22241A 100%)}
:root[data-theme="dark"] .sky-maghrib{background:linear-gradient(165deg,#3E2A22 0%,#33262E 55%,#2A2638 100%)}
/* verify AA contrast for every text-on-sky pair in both themes before shipping */

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}