/* رموز التصميم — القسم (د) من المواصفة v21. مصدر واحد للويب والنسخ المشتقة. */
@font-face{font-family:"Aref Ruqaa";src:url("/fonts/ArefRuqaa-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Aref Ruqaa";src:url("/fonts/ArefRuqaa-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Reem Kufi";src:url("/fonts/ReemKufi.ttf") format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/IBMPlexSansArabic-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/IBMPlexSansArabic-SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}

:root{
  --void:#070D12; --ink:#0B1620; --ink-2:#122230; --ink-3:#1A3040; --ink-4:#22404F; --line:#2E4E5E;
  --gold-deep:#8A6512; --gold:#C9A227; --gold-soft:#E8CE74; --gold-glow:#FFF0B8;
  --gold-leaf:linear-gradient(135deg,#8A6512 0%,#C9A227 28%,#FFF0B8 48%,#C9A227 68%,#8A6512 100%);
  --gold-text-grad:linear-gradient(135deg,#E0BE55 0%,#F6E3A0 30%,#FFF6D2 50%,#F0D27A 72%,#E0BE55 100%);
  --bark-dark:#5A2A00; --bark:#8E4300; --bark-lit:#B87002; --bark-glow:#D89A3A;
  --leaf-deep:#1F5B2E; --leaf:#2E8B45; --leaf-lit:#5FBF6A; --leaf-young:#A6D93D;
  --sky-far:#0E2430; --sky-near:#1B3D46; --horizon:#2A5A54;
  --vellum:#F2EADA; --vellum-dim:#C4B79E; --sand:#A8936F; --parchment:#EDE0C8;
  --male:#6FA8FF; --female:#E39ACB; --ok:#3FD8A0; --warn:#F0B34E; --danger:#F0637B;
  --g1:#C9A227; --g2:#B8763A; --g3:#8E9B3C; --g4:#3E8F6E; --g5:#3B7EA1; --g6:#6C6BA8; --g7:#A05C93; --g8:#B0553F; --g9:#7C8C99;
  --branch-mohammed:#DCE6F1; --branch-salem:#E2EFDA; --branch-ali:#FCE4D6; --branch-ahmad:#FFF2CC;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  --vignette:radial-gradient(120% 90% at 50% 0%,transparent 45%,rgba(0,0,0,.45) 100%);
  --page-bg:radial-gradient(140% 100% at 50% -10%,var(--sky-near) 0%,var(--ink) 45%,var(--void) 100%);
  --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px; --sp:4px;
  --e1:0 1px 2px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.05);
  --e2:0 4px 10px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.07);
  --e3:0 10px 24px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.09);
  --e4:0 22px 48px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.10);
  --glow-gold:0 0 0 1px rgba(232,206,116,.45),0 0 18px rgba(201,162,39,.35);
  --glow-leaf:0 0 0 1px rgba(95,191,106,.40),0 0 16px rgba(46,139,69,.30);
  --dur-1:120ms; --dur-2:220ms; --dur-3:420ms; --dur-4:900ms;
  --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-grow:cubic-bezier(.34,1.26,.64,1);

  /* أدوار دلالية تتبدّل بين الليل والنهار */
  --bg:var(--ink); --surface:var(--ink-2); --card:var(--ink-3); --raised:var(--ink-4); --rule:var(--line);
  --text:var(--vellum); --text-dim:var(--vellum-dim); --text-hint:var(--sand);
  --accent:var(--gold); --accent-text:var(--gold-soft); --title-grad:var(--gold-text-grad);
  --field:#0E1C28; --plate-ink:#1C1305; --btn-ink:#231803;
  --sky-top:var(--sky-far); --sky-bot:var(--horizon); --ground:#0F2A1C; --ground-2:#0A1C13;
  --sheen:rgba(255,255,255,.07); --shadow-col:rgba(0,0,0,.5);
  --f-display:"Aref Ruqaa","Amiri","Noto Naskh Arabic","Geeza Pro","Traditional Arabic",serif;
  --f-head:"Reem Kufi","Noto Kufi Arabic","Segoe UI",Tahoma,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Noto Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --base:16px;
  color-scheme:dark;
}
/* وضع النهار: رَقّ وحبر بني وذهب أغمق — يتبع النظام افتراضياً ويُختار من الإعدادات */
:root[data-theme="day"]{
  --bg:#EADCC0; --surface:#F3E8D2; --card:#FAF2E1; --raised:#FFF9EC; --rule:#CDB98F;
  --text:#2A1A0A; --text-dim:#5B452A; --text-hint:#6F5836;
  --accent:#8A6512; --accent-text:#6B4A08; --title-grad:linear-gradient(135deg,#5E3F05 0%,#7A560C 35%,#7F5A0C 50%,#6B4A08 72%,#5E3F05 100%);
  --page-bg:radial-gradient(140% 100% at 50% -10%,#FBF3E0 0%,#EADCC0 50%,#D9C7A2 100%);
  --vignette:radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(90,60,10,.16) 100%);
  --field:#FFFBF1; --sky-top:#CFE6EE; --sky-bot:#EEF4E2; --ground:#7FA35A; --ground-2:#5E8443;
  --e1:0 1px 2px rgba(80,55,10,.18),inset 0 1px 0 rgba(255,255,255,.7);
  --e2:0 4px 10px rgba(80,55,10,.20),inset 0 1px 0 rgba(255,255,255,.75);
  --e3:0 10px 24px rgba(80,55,10,.24),inset 0 1px 0 rgba(255,255,255,.8);
  --e4:0 22px 48px rgba(60,40,5,.32),inset 0 1px 0 rgba(255,255,255,.85);
  --sheen:rgba(255,255,255,.55); --shadow-col:rgba(80,55,10,.3);
  --ok:#0F7A54; --warn:#8A5A00; --danger:#B3213C; --male:#1F5FBF; --female:#A63A86;
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="night"]){
    --bg:#EADCC0; --surface:#F3E8D2; --card:#FAF2E1; --raised:#FFF9EC; --rule:#CDB98F;
    --text:#2A1A0A; --text-dim:#5B452A; --text-hint:#6F5836;
    --accent:#8A6512; --accent-text:#6B4A08; --title-grad:linear-gradient(135deg,#5E3F05 0%,#7A560C 35%,#7F5A0C 50%,#6B4A08 72%,#5E3F05 100%);
    --page-bg:radial-gradient(140% 100% at 50% -10%,#FBF3E0 0%,#EADCC0 50%,#D9C7A2 100%);
    --vignette:radial-gradient(120% 90% at 50% 0%,transparent 55%,rgba(90,60,10,.16) 100%);
    --field:#FFFBF1; --sky-top:#CFE6EE; --sky-bot:#EEF4E2; --ground:#7FA35A; --ground-2:#5E8443;
    --e1:0 1px 2px rgba(80,55,10,.18),inset 0 1px 0 rgba(255,255,255,.7);
    --e2:0 4px 10px rgba(80,55,10,.20),inset 0 1px 0 rgba(255,255,255,.75);
    --e3:0 10px 24px rgba(80,55,10,.24),inset 0 1px 0 rgba(255,255,255,.8);
    --e4:0 22px 48px rgba(60,40,5,.32),inset 0 1px 0 rgba(255,255,255,.85);
    --sheen:rgba(255,255,255,.55); --shadow-col:rgba(80,55,10,.3);
    --ok:#0F7A54; --warn:#8A5A00; --danger:#B3213C; --male:#1F5FBF; --female:#A63A86;
    color-scheme:light;
  }
}
:root[data-font="big"]{--base:18px}