/* «آخر قيم» — tokens.css · الهوية المعتمدة
   استخدم المتغيرات، لا تكتب الألوان بالهيكس داخل المكوّنات. */
:root{
  /* الألوان */
  --jamr:#FF5A36; --jamr-dark:#D9452A; --jamr-light:#FFD6CB;
  /* A4/A17 (مراجعة 29 سبتمبر، قرار المالك 30 سبتمبر): الجمر نصًا على القشدة 2.86:1 والخافت النهاري 4.38:1 دون 4.5:1.
     الجمر للنص نهارًا 4.93:1 على القشدة (5.36 على الأبيض)؛ للنص فقط، والأزرار والعلامات والجمرات بالجمر نفسه. */
  --jamr-text-nahar:#C23A20;
  --layl:#10141F; --layl-2:#161B29; --layl-3:#0B0E17; --hudud:#2A3247;
  --qashda:#FFF4E5; --thalj:#BFE9FF; --thalj-dark:#1B6E8F; --thalj-light:#E3F4FF;
  --sharara:#FFC857; --sharara-dark:#8F6210; --sharara-light:#FFF0C8;
  --qamar:#CDBBFF; --qamar-dark:#5B44B5; --qamar-light:#EFE9FF;
  --fajr:#FFB3C1; --fajr-dark:#A62A5F; --fajr-light:#FFE4EA; /* محجوز: خدمة «المونتاج» مستقبلاً */
  --shafaq:#8DE8C6; --shafaq-dark:#1B7A5E; --shafaq-light:#DDF7EC; /* «الإدارة»: الكواليس الداخلية (لوحة 15) — للفعّال والأساسي والأرقام الكبيرة فقط */
  --nass-2:#C7CDD9; --shurooh:#9AA3B5; --hudud-nahar:#EADFD0;
  /* إضافة الموقع: أسماء لقيم النهار الثلاث المستخدمة تحت، وثلاثيات RGB للشفافيات (rgba(var(--jamr-rgb),.12))
     حتى لا يُكتب أي هيكس خارج هذا الملف. */
  --abyad:#FFFFFF; --nass-2-nahar:#3E4658; --shurooh-nahar:#616A7C;
  --layl-rgb:16,20,31; --qashda-rgb:255,244,229; --jamr-rgb:255,90,54; --thalj-rgb:191,233,255; --sharara-rgb:255,200,87; --qamar-rgb:205,187,255; --shafaq-rgb:141,232,198;
  /* الأسطح (الليل هو الأساس) */
  --bg:var(--layl); --card:var(--layl-2); --field:var(--layl-3); --border:var(--hudud);
  --text:var(--qashda); --text-2:var(--nass-2); --text-3:var(--shurooh);
  --primary:var(--jamr); --on-primary:var(--layl); --secondary:var(--thalj);
  /* الخطوط */
  --font-display:'Cairo Play',sans-serif; --font-body:'Rubik',sans-serif;
  /* الزوايا */
  --r-sm:4px; --r-md:4px; --r-lg:6px; --r-xl:6px; --r-card:6px; --r-pill:999px; /* لمسة اليد (لوحة 14): حواف حادّة، والكبسولة للفعل الأساسي وحده */
  /* الحركة */
  /* D11 (قرار المالك 30 سبتمبر): سلم الخطوط من BRAND-GUIDE §5 — الصفحة 56–60، القسم 34، البطاقة 22–24، الزر 18 (بخط العناوين)؛
     يصغر على الشاشات الضيقة ويبلغ المواصفة على سطح المكتب. */
  --fs-title:clamp(34px,4.7vw,60px); --fs-section:clamp(26px,2.7vw,34px); --fs-card:clamp(20px,1.9vw,24px); --fs-button:clamp(16px,1.4vw,18px);
  --t-lamsa:120ms; --t-intiqal:200ms; --t-dukhul:320ms; --t-ihtifal:600ms; --t-nafas:2400ms;
  --e-jamr:cubic-bezier(.2,.8,.2,1); --e-rahil:cubic-bezier(.4,0,1,1); --e-nafas:cubic-bezier(.45,0,.55,1); --e-nabda:cubic-bezier(.34,1.4,.64,1);
  --d-sm:8px; --d-md:16px; --d-lg:32px;
  /* الظلال */
  --glow:none; --ring:0 0 0 2px var(--bg),0 0 0 4px var(--primary); /* لا توهّج؛ حلقة تركيز صلبة */
}
/* النهار */
[data-theme="day"]{ --bg:var(--qashda); --card:var(--abyad); --field:var(--abyad); --border:var(--hudud-nahar);
  --text:var(--layl); --text-2:var(--nass-2-nahar); --text-3:var(--shurooh-nahar); --secondary:var(--thalj-dark); }

/* الخدمتان: كل خدمة تصبغ الهوية بلونها. حط الكلاس على <html> أو على حاوية الصفحة.
   الأم (بدون كلاس): أساسي جمر، ثانوي ثلج. */
.svc-space{ --primary:var(--thalj); --secondary:var(--jamr); --glow:none; --ring:0 0 0 2px var(--bg),0 0 0 4px var(--primary) }
.svc-design{ --primary:var(--sharara); --secondary:var(--thalj); --glow:none; --ring:0 0 0 2px var(--bg),0 0 0 4px var(--primary) }
.svc-news{ --primary:var(--qamar); --secondary:var(--jamr); --glow:none; --ring:0 0 0 2px var(--bg),0 0 0 4px var(--primary) }
.svc-edit{ --primary:var(--fajr); --secondary:var(--thalj); --glow:none; --ring:0 0 0 2px var(--bg),0 0 0 4px var(--primary) } /* محجوز */
.svc-admin{ --primary:var(--shafaq); --secondary:var(--thalj); --glow:none; --ring:0 0 0 2px var(--bg),0 0 0 4px var(--primary) } /* «الإدارة»: داخلي، لا تسويق (لوحة 15) */
[data-theme="day"] .svc-space,[data-theme="day"].svc-space{ --primary:var(--thalj-dark) }
[data-theme="day"] .svc-design,[data-theme="day"].svc-design{ --primary:var(--sharara-dark) }
[data-theme="day"] .svc-news,[data-theme="day"].svc-news{ --primary:var(--qamar-dark) }
[data-theme="day"] .svc-edit,[data-theme="day"].svc-edit{ --primary:var(--fajr-dark) }
[data-theme="day"] .svc-admin,[data-theme="day"].svc-admin{ --primary:var(--shafaq-dark) }

/* خط Cairo Play خط ملوّن: نقاط الحروف والأرقام والأقواس تاخذ لوحة الخط.
   القاعدة: جمر على الليل والقشدة والثلج، وليل على الجمر (نفس قاعدة جمرة). */
@font-palette-values --akhir-jamr{font-family:'Cairo Play';base-palette:0;override-colors:0 #FF5A36,1 #FF5A36,2 #FF5A36,3 #FF5A36,4 #FF5A36}
/* A4 (قرار المالك 30 سبتمبر): لوحة الجمر النهارية لأرقام ونقاط Cairo Play على القشدة (4.93:1)، على نمط لوحات الخدمات الغامقة. */
@font-palette-values --akhir-jamr-nahar{font-family:'Cairo Play';base-palette:0;override-colors:0 #C23A20,1 #C23A20,2 #C23A20,3 #C23A20,4 #C23A20}
@font-palette-values --akhir-layl{font-family:'Cairo Play';base-palette:0;override-colors:0 #10141F,1 #10141F,2 #10141F,3 #10141F,4 #10141F}
@font-palette-values --akhir-qashda{font-family:'Cairo Play';base-palette:0;override-colors:0 #FFF4E5,1 #FFF4E5,2 #FFF4E5,3 #FFF4E5,4 #FFF4E5}
@font-palette-values --akhir-thalj{font-family:'Cairo Play';base-palette:0;override-colors:0 #BFE9FF,1 #BFE9FF,2 #BFE9FF,3 #BFE9FF,4 #BFE9FF}
@font-palette-values --akhir-sharara{font-family:'Cairo Play';base-palette:0;override-colors:0 #FFC857,1 #FFC857,2 #FFC857,3 #FFC857,4 #FFC857}
@font-palette-values --akhir-thalj-dark{font-family:'Cairo Play';base-palette:0;override-colors:0 #1B6E8F,1 #1B6E8F,2 #1B6E8F,3 #1B6E8F,4 #1B6E8F}
@font-palette-values --akhir-qamar{font-family:'Cairo Play';base-palette:0;override-colors:0 #CDBBFF,1 #CDBBFF,2 #CDBBFF,3 #CDBBFF,4 #CDBBFF}
@font-palette-values --akhir-qamar-dark{font-family:'Cairo Play';base-palette:0;override-colors:0 #5B44B5,1 #5B44B5,2 #5B44B5,3 #5B44B5,4 #5B44B5}
@font-palette-values --akhir-fajr{font-family:'Cairo Play';base-palette:0;override-colors:0 #FFB3C1,1 #FFB3C1,2 #FFB3C1,3 #FFB3C1,4 #FFB3C1}
@font-palette-values --akhir-fajr-dark{font-family:'Cairo Play';base-palette:0;override-colors:0 #A62A5F,1 #A62A5F,2 #A62A5F,3 #A62A5F,4 #A62A5F}
@font-palette-values --akhir-sharara-dark{font-family:'Cairo Play';base-palette:0;override-colors:0 #8F6210,1 #8F6210,2 #8F6210,3 #8F6210,4 #8F6210}
@font-palette-values --akhir-shafaq{font-family:'Cairo Play';base-palette:0;override-colors:0 #8DE8C6,1 #8DE8C6,2 #8DE8C6,3 #8DE8C6,4 #8DE8C6}
@font-palette-values --akhir-shafaq-dark{font-family:'Cairo Play';base-palette:0;override-colors:0 #1B7A5E,1 #1B7A5E,2 #1B7A5E,3 #1B7A5E,4 #1B7A5E}
.font-display,.d,h1,h2,h3,h4{font-family:var(--font-display);font-palette:--akhir-jamr}
.on-ember .font-display,.on-ember.font-display,.on-ember .d,.on-ember.d{font-palette:--akhir-layl}
.on-night .font-display,.on-night.font-display,.on-night .d,.on-night.d{font-palette:--akhir-jamr}
.dots-cream{font-palette:--akhir-qashda}
/* داخل الخدمة: نقاط الخط بلون الخدمة، وعلى زرها الأساسي ليل */
.svc-space .font-display,.svc-space .d,.svc-space h1,.svc-space h2,.svc-space h3{font-palette:--akhir-thalj}
.svc-design .font-display,.svc-design .d,.svc-design h1,.svc-design h2,.svc-design h3{font-palette:--akhir-sharara}
.svc-news .font-display,.svc-news .d,.svc-news h1,.svc-news h2,.svc-news h3{font-palette:--akhir-qamar}
.svc-edit .font-display,.svc-edit .d,.svc-edit h1,.svc-edit h2,.svc-edit h3{font-palette:--akhir-fajr}
.svc-admin .font-display,.svc-admin .d,.svc-admin h1,.svc-admin h2,.svc-admin h3{font-palette:--akhir-shafaq}
[data-theme="day"] .svc-space .d,[data-theme="day"] .svc-space .font-display{font-palette:--akhir-thalj-dark}
[data-theme="day"] .svc-design .d,[data-theme="day"] .svc-design .font-display{font-palette:--akhir-sharara-dark}
[data-theme="day"] .svc-news .d,[data-theme="day"] .svc-news .font-display{font-palette:--akhir-qamar-dark}
[data-theme="day"] .svc-edit .d,[data-theme="day"] .svc-edit .font-display{font-palette:--akhir-fajr-dark}
[data-theme="day"] .svc-admin .d,[data-theme="day"] .svc-admin .font-display{font-palette:--akhir-shafaq-dark}
.on-primary .d,.on-primary.d,.on-primary .font-display{font-palette:--akhir-layl}

html{background:var(--bg);color:var(--text);font-family:var(--font-body)}
body{margin:0}
::selection{background:rgba(255,90,54,.35);color:var(--text)}
:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--ring)}
/* مراجعة المجموعة 3: رابط التخطي ينقل التركيز إلى main (tabindex=-1)، فكانت الحلقة تحيط بالصفحة كلها. الهدف المنقول إليه لا حلقة له. */
main[tabindex="-1"]:focus-visible{outline:0;box-shadow:none}
@media (forced-colors:active){
  :focus-visible{outline:2px solid Highlight!important;outline-offset:2px!important}
  main[tabindex="-1"]:focus-visible{outline:0!important}
  .template-option:has(input:focus-visible),.font-option:has(input:focus-visible),.file-picker:has(input:focus-visible),label.design-plan-option:has(input:focus-visible),.compare:has(input:focus-visible){outline:2px solid Highlight}
}
*{scrollbar-width:thin;scrollbar-color:var(--jamr) transparent}
*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-thumb{background:var(--jamr);border-radius:99px}*::-webkit-scrollbar-track{background:transparent}

/* الحركة — keyframes المعتمدة */
@keyframes akhir-enter{from{transform:translateX(var(--d-md));opacity:0}to{transform:none;opacity:1}}
@keyframes akhir-exit{from{transform:none;opacity:1}to{transform:translateX(calc(-1 * var(--d-md)));opacity:0}}
@keyframes akhir-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes akhir-face{from{opacity:0}to{opacity:1}}
@keyframes akhir-blink{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.12)}}
@keyframes akhir-breath{0%,100%{transform:scale(1);filter:drop-shadow(0 0 6px rgba(255,90,54,.3))}50%{transform:scale(1.04);filter:drop-shadow(0 0 20px rgba(255,90,54,.8))}}
@keyframes akhir-pulse{0%,100%{opacity:.22}50%{opacity:1}}
@keyframes akhir-plus{0%{transform:translateY(0) scale(.6);opacity:0}25%{transform:translateY(-14px) scale(1.12);opacity:1}55%{transform:translateY(-22px) scale(1);opacity:1}100%{transform:translateY(-36px) scale(1);opacity:0}}
@keyframes akhir-shimmer{from{background-position:0% 0}to{background-position:100% 0}}
@keyframes akhir-z{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(-12px,-26px);opacity:0}}
.anim-enter{animation:akhir-enter var(--t-dukhul) var(--e-jamr) both}
.anim-exit{animation:akhir-exit var(--t-intiqal) var(--e-rahil) both}
.anim-draw{stroke-dasharray:100;stroke-dashoffset:100;animation:akhir-draw var(--t-dukhul) var(--e-jamr) forwards}
.anim-face{opacity:0;animation:akhir-face var(--t-lamsa) linear var(--t-dukhul) forwards}
.anim-breath{animation:akhir-breath var(--t-nafas) var(--e-nafas) infinite;transform-origin:center}
.anim-plus{animation:akhir-plus var(--t-ihtifal) var(--e-nabda) forwards}
.skeleton{background:linear-gradient(90deg,#1B2130 0%,#2A3247 38%,rgba(255,90,54,.4) 50%,#2A3247 62%,#1B2130 100%);background-size:200% 100%;animation:akhir-shimmer 1.6s linear infinite;border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){
  .anim-enter,.anim-exit{animation-duration:var(--t-intiqal);transform:none!important}
  .anim-draw{animation:none;stroke-dashoffset:0}
  .anim-breath,.skeleton{animation:none}
}