/* ============================================================
   AL MOUTMAG — المتمم · Phase 1 UI
   main.css · Design tokens, fonts, reset, background FX
   Brand: bg #050810 · cyan #22d3ee · blue #3b82f6 · purple #8b5cf6
   ============================================================ */

:root{
  /* Brand palette */
  --alm-bg:#050810;
  --alm-bg-soft:#0a0f1e;
  --alm-surface:rgba(15,23,42,.65);
  --alm-surface-strong:rgba(11,17,32,.9);
  --alm-surface-soft:rgba(15,23,42,.4);
  --alm-border:rgba(255,255,255,.1);
  --alm-border-strong:rgba(255,255,255,.18);
  --alm-cyan:#22d3ee;
  --alm-blue:#3b82f6;
  --alm-purple:#8b5cf6;
  --alm-grad:linear-gradient(120deg,var(--alm-cyan),var(--alm-blue) 52%,var(--alm-purple));
  --alm-text:#e6edf7;
  --alm-text-dim:#9aa8bf;
  --alm-text-faint:#64748b;
  --alm-ok:#34d399;
  --alm-warn:#fbbf24;
  --alm-err:#f87171;

  /* Shape & type */
  --alm-radius:16px;
  --alm-radius-sm:11px;
  --alm-fs:14px;
  --alm-font:'Cairo','Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  --alm-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Glow */
  --alm-shadow:0 10px 34px rgba(2,6,17,.5);

  --alm-header-h:62px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--alm-bg);color:var(--alm-text);
  font-family:var(--alm-font);font-size:var(--alm-fs);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow:hidden;
}
h1,h2,h3,h4,p{margin:0}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;font-size:inherit}
input,textarea,select{font-family:inherit;color:inherit}
img,svg{display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}

::selection{background:rgba(34,211,238,.28);color:#fff}
:focus-visible{outline:2px solid var(--alm-cyan);outline-offset:2px;border-radius:6px}

/* ---------- Scrollbars ---------- */
.alm-scroll{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.28) transparent}
.alm-scroll::-webkit-scrollbar{width:8px;height:8px}
.alm-scroll::-webkit-scrollbar-thumb{background:rgba(148,163,184,.24);border-radius:99px;border:2px solid transparent;background-clip:content-box}
.alm-scroll::-webkit-scrollbar-thumb:hover{background-color:rgba(148,163,184,.45)}
.alm-scroll::-webkit-scrollbar-track{background:transparent}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Icon base (SVG sprite) ---------- */
svg.icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* ---------- Gradient text & glow helpers ---------- */
.alm-grad-text{background:var(--alm-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.alm-glow-text{filter:drop-shadow(0 0 20px rgba(59,130,246,.35))}
.alm-glow-pulse{animation:almGlowPulse 3.2s ease-in-out infinite}

/* ---------- Background FX ---------- */
.alm-bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.alm-bg-fx__grid{position:absolute;inset:-2px;
  background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 38%,#000 30%,transparent 100%);
          mask-image:radial-gradient(75% 65% at 50% 38%,#000 30%,transparent 100%);
}
.alm-bg-fx__orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
.alm-bg-fx__orb--cyan{width:520px;height:520px;top:-190px;inset-inline-end:-140px;background:radial-gradient(circle,rgba(34,211,238,.2),transparent 65%);animation:almDrift 26s ease-in-out infinite}
.alm-bg-fx__orb--purple{width:640px;height:640px;bottom:-260px;inset-inline-start:-180px;background:radial-gradient(circle,rgba(139,92,246,.17),transparent 65%);animation:almDrift 32s ease-in-out infinite reverse}
.alm-bg-fx__orb--blue{width:420px;height:420px;top:38%;inset-inline-start:44%;background:radial-gradient(circle,rgba(59,130,246,.12),transparent 65%);animation:almDrift 38s ease-in-out infinite}

body[data-glow="off"] .alm-bg-fx__orb{display:none}
body[data-glow="soft"] .alm-bg-fx__orb{opacity:.28}
body[data-animbg="off"] .alm-bg-fx__orb{animation:none}

/* ---------- Keyframes ---------- */
@keyframes almGlowPulse{
  0%,100%{filter:drop-shadow(0 0 5px rgba(34,211,238,.45)) drop-shadow(0 0 14px rgba(59,130,246,.28))}
  50%{filter:drop-shadow(0 0 10px rgba(34,211,238,.75)) drop-shadow(0 0 26px rgba(139,92,246,.5))}
}
@keyframes almDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,26px) scale(1.08)}}
@keyframes almFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes almFadeIn{from{opacity:0}to{opacity:1}}
@keyframes almBlink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes almSpin{to{transform:rotate(360deg)}}
@keyframes almPop{0%{transform:scale(.94);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes almPulseDot{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}