/* ============================================================
   AY/OS : base.css : tokens, themes, reset, utilities
   ============================================================ */

:root {
  --f-ui: "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif;
  --f-display: "Syne", "IBM Plex Sans Arabic", sans-serif;
  --f-mono: "IBM Plex Mono", "IBM Plex Sans Arabic", ui-monospace, monospace;

  --r-lg: 18px;
  --r: 12px;
  --r-sm: 8px;
  --tb-h: 54px;
  --sb-h: 34px;

  --ease: cubic-bezier(.22, .8, .18, 1);
  --ease-snap: cubic-bezier(.3, 1.4, .4, 1);
  --t-fast: 140ms;
  --t-med: 260ms;
  --t-slow: 420ms;
}

/* ---------- THEMES ---------- */
html[data-theme="dark"], html[data-theme="rgb"] {
  --bg0: #05070b;
  --bg1: #0a0f17;
  --bg2: #0f1623;
  --panel: rgba(15, 22, 33, .82);
  --panel-solid: #0f1622;
  --panel-2: rgba(159, 211, 255, .055);
  --ink: #eaf3fc;
  --ink2: #b3c2d3;
  --muted: #647890;
  --line: rgba(151, 196, 232, .14);
  --line2: rgba(151, 196, 232, .30);
  --acc: #5ad7ff;
  --acc2: #9ff2ff;
  --acc-deep: #1f8fdd;
  --acc-ink: #04212e;
  --ok: #3ddc97;
  --warn: #ffb454;
  --bad: #ff5470;
  --glow: 0 0 28px rgba(90, 215, 255, .22);
  --shadow-win: 0 28px 90px rgba(0, 0, 0, .6), 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-pop: 0 18px 60px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

html[data-theme="light"] {
  --bg0: #e7e2d6;
  --bg1: #f1ede3;
  --bg2: #faf7ef;
  --panel: rgba(255, 253, 247, .88);
  --panel-solid: #fffdf7;
  --panel-2: rgba(24, 32, 42, .045);
  --ink: #151c25;
  --ink2: #415060;
  --muted: #84909d;
  --line: rgba(21, 28, 37, .14);
  --line2: rgba(21, 28, 37, .28);
  --acc: #0c7fc4;
  --acc2: #0a6aa6;
  --acc-deep: #095a8d;
  --acc-ink: #ffffff;
  --ok: #0f9d6a;
  --warn: #c97a08;
  --bad: #d6385e;
  --glow: 0 0 24px rgba(12, 127, 196, .18);
  --shadow-win: 0 24px 70px rgba(30, 38, 50, .25), 0 4px 14px rgba(30, 38, 50, .16);
  --shadow-pop: 0 16px 48px rgba(30, 38, 50, .22);
  color-scheme: light;
}

html[data-theme="crt"] {
  --bg0: #010603;
  --bg1: #021008;
  --bg2: #03150b;
  --panel: rgba(2, 20, 11, .88);
  --panel-solid: #03140b;
  --panel-2: rgba(72, 255, 155, .06);
  --ink: #56ffa4;
  --ink2: #36d57f;
  --muted: #1e8a55;
  --line: rgba(72, 255, 155, .22);
  --line2: rgba(72, 255, 155, .45);
  --acc: #56ffa4;
  --acc2: #b4ffd6;
  --acc-deep: #17b86a;
  --acc-ink: #01140a;
  --ok: #56ffa4;
  --warn: #ffd24d;
  --bad: #ff6b6b;
  --glow: 0 0 30px rgba(86, 255, 164, .3);
  --shadow-win: 0 24px 80px rgba(0, 0, 0, .7), 0 0 0 1px rgba(86, 255, 164, .12);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

body {
  font-family: var(--f-ui);
  background: var(--bg0);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
input, textarea { font: inherit; color: inherit; }
::placeholder { color: var(--muted); }

::selection { background: var(--acc); color: var(--acc-ink); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 4px; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- UTILITIES ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .62em 1.15em;
  border-radius: var(--r-sm);
  border: 1px solid var(--line2);
  background: var(--panel-2);
  color: var(--ink);
  font-weight: 500;
  font-size: .92rem;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  user-select: none;
}
.btn:hover { background: var(--panel-2); border-color: var(--acc); box-shadow: var(--glow); transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0) scale(.97); }
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn.btn-acc { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); font-weight: 700; }
.btn.btn-acc:hover { background: var(--acc2); border-color: var(--acc2); }
.btn.btn-danger { border-color: var(--bad); color: var(--bad); }
.btn.btn-danger:hover { background: var(--bad); color: #fff; box-shadow: 0 0 24px color-mix(in srgb, var(--bad) 40%, transparent); }

.chip {
  display: inline-block; padding: .18em .7em;
  border: 1px solid var(--line); border-radius: 99px;
  font-family: var(--f-mono); font-size: .72rem; color: var(--ink2);
  background: var(--panel-2);
  white-space: nowrap;
}

.kbd {
  font-family: var(--f-mono); font-size: .78em;
  border: 1px solid var(--line2); border-bottom-width: 2px;
  border-radius: 6px; padding: .1em .5em;
  background: var(--panel-2); color: var(--ink2);
  direction: ltr; display: inline-block;
}

/* ---------- MASCOT BOT ---------- */
.bot-eye {
  transform-origin: center;
  transform-box: fill-box;
  animation: bot-blink 4.6s ease-in-out infinite;
}
@keyframes bot-blink {
  0%, 91%, 100% { transform: scaleY(1); }
  93.5%, 95.5% { transform: scaleY(.12); }
}

/* ---------- GRAIN OVERLAY ---------- */
.grain {
  position: fixed; inset: -50%;
  pointer-events: none; z-index: 9000;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation: grain-shift 1.2s steps(4) infinite;
}
html[data-theme="light"] .grain { opacity: .035; }
/* عند انشغال سطح المكتب (نافذتان فأكثر) أوقف تحريك الحبيبات: يبقى شكلها كما هو ويزول إعادة التركيب الدوري للشاشة كاملة */
html.is-busy .grain { animation-play-state: paused; }
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

/* ---------- CRT EXTRAS ---------- */
html[data-theme="crt"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9100;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .22) 2px 4px);
  mix-blend-mode: multiply;
}
html[data-theme="crt"] body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9101;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, .5) 100%);
}
html[data-theme="crt"] { text-shadow: 0 0 6px rgba(86, 255, 164, .35); }

/* ---------- NEON THEME EXTRAS ---------- */
@keyframes rgb-hue { to { filter: hue-rotate(360deg); } }
html[data-theme="rgb"] .win::before,
html[data-theme="rgb"] .taskbar::before {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  border-radius: inherit;
  background: conic-gradient(#ff2d78, #ffbe0b, #3bf4fb, #8338ec, #ff2d78);
  animation: rgb-hue 3.2s linear infinite;
  opacity: .9;
}
html[data-theme="rgb"] .taskbar::before { inset: -2px -2px 0 -2px; }
html[data-theme="rgb"] .tb-start svg { animation: rgb-hue 3.2s linear infinite; }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}
html.no-motion *, html.no-motion *::before, html.no-motion *::after {
  animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important;
}