/* Theme: ويندوز 98 — classic Windows 95/98, Arabic edition.
   Teal desktop, grey windows, a mirrored navy title bar, 3D edges drawn
   with shadows (light from the top-left), yellow tooltips. */

:root {
  --bg: #008080;            /* the famous teal desktop */
  --surface: #c0c0c0;       /* window grey */
  --face: #c0c0c0;          /* button grey */
  --field: #ffffff;
  --text: #000000;
  --muted: #404040;
  --line: #808080;
  --link: #0000ee;
  --link-visited: #551a8b;
  --accent: #000080;
  --accent-text: #ffffff;
  --wa: #0b7a3b;
  --wa-text: #ffffff;
  --danger: #a00000;
  --ok: #005500;            /* dark enough to read on the grey */
  --note-bg: #ffffe1;       /* Windows tooltip yellow */
  --note-text: #000000;
  --note-border: #000000;

  --font: Tahoma, system-ui, "Segoe UI", "Noto Sans Arabic", "Geeza Pro", sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;

  --radius: 0;
  --box-border: 0 none;
  --field-border: 0 none;
  --raised: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --pressed: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  --sunken: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;

  --desktop-pad: 0.5rem;
  --desktop-pad-wide: 2rem 1rem;
  --window-pad: 3px;
  --window-border: 0 none;
  --window-radius: 0;
  --window-shadow: var(--raised);
  --title-display: flex;
  --title-bg: linear-gradient(to left, #000080, #1084d0);   /* mirrored: dark side on the right */
  --title-text: #ffffff;

  --hr: 1px solid #808080;
  --hr-under: 1px solid #ffffff;   /* the two lines make it look etched */
  --group-border: 1px solid #808080;
  --group-shadow: 1px 1px 0 #fff, inset 1px 1px 0 #fff;
  --menu-bg: transparent;
  --menu-border: 1px solid #808080;
  --menu-shadow: 0 1px 0 #fff;
  --footer-border: 0 none;
  --footer-shadow: var(--sunken);   /* the status bar */
  --row-line: 1px dotted #808080;
  --card-shadow: none;

  --focus: 2px dotted #000;         /* Windows' dotted focus rectangle */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0h8L4 4z'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* Menu items highlight in navy, like a Windows menu */
.topbar a:hover { background: #000080; color: #fff; text-decoration: none; }
.cats a[aria-current] { background: #dfdfdf; }
.btn:focus-visible { outline-offset: -5px; }

/* «كيف بيشتغل؟» on the front page: each step's icon in its own colour
   (orange, navy, purple, green), all dark enough for the thin lines to stay
   readable on white. */
.steps li:nth-child(1) .pixel-icon { color: #d35400; }
.steps li:nth-child(2) .pixel-icon { color: #000080; }
.steps li:nth-child(3) .pixel-icon { color: #800080; }
.steps li:nth-child(4) .pixel-icon { color: #008000; }