/* =========================================================
   DESIGN TOKENS
   ========================================================= */
@font-face {
  font-family: "Press Start 2P";
  src: local("Press Start 2P");
}

@font-face {
  font-family: "PixelAE";
  src: url("../fonts/PixelAE-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "PixelAE";
  src: url("../fonts/PixelAE-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

:root {
  /* palette — soft nostalgic pastel OS */
  --ink: #2e2444;
  --ink-soft: #564a72;
  --cream: #f4ecd8;
  --cream-deep: #e7dcc0;
  --lilac: #8b6fb3;
  --lilac-deep: #6b4f92;
  --pink: #d98cae;
  --coral: #ff8a5c;
  --mint: #7cd6c0;
  --shadow: #1a1428;
  --white: #fffdf7;

  /* window chrome */
  --win-face: var(--cream);
  --win-border: var(--ink);
  --win-title-active: linear-gradient(180deg, #a483c9 0%, #6b4f92 100%);
  --win-title-inactive: linear-gradient(180deg, #cfc6b8 0%, #b6ab99 100%);
  --win-title-text: var(--white);

  /* surface */
  --desktop-icon-text: var(--white);
  --taskbar-bg: rgba(46, 36, 68, 0.88);
  --panel-btn-bg: var(--cream-deep);
  --panel-btn-hover-bg: var(--cream);
  --panel-btn-active-bg: var(--lilac);
  --panel-btn-text: var(--ink);
  --panel-btn-border: var(--ink);
  --radius: 2px;
  --corner-radius: 8px;

  --font-pixel-display: "Press Start 2P", "VT323", monospace;
  --font-pixel-body: "VT323", monospace;
  --font-modern: "Space Grotesk", "Poppins", system-ui, sans-serif;

  /* Arabic equivalents. Reem Kufi's blocky, angular kufic letterforms are
     the closest match to the site's pixel/8-bit feel among the readily
     available Arabic webfonts (no true "pixel" Arabic font is available
     on Google Fonts); Cairo covers the "modern" font mode. */
  --font-pixel-arabic: "PixelAE", "Press Start 2P", sans-serif;
  --font-modern-arabic: "Cairo", "Space Grotesk", sans-serif;

  --font-display: var(--font-pixel-display);
  --font-body: var(--font-pixel-body);

  --anim-speed: 1;
  --shadow-hard: 4px 4px 0 var(--shadow);
  --shadow-soft: 2px 2px 0 var(--shadow);
}

/* ---------- DARK THEME ---------- */
[data-theme="dark"] {
  --ink: #f1ecff;
  --ink-soft: #cabce8;
  --cream: #241c38;
  --cream-deep: #1a1428;
  /* --white is intentionally NOT overridden here: across the whole UI it's used
     as light text/borders on saturated or dark surfaces (taskbar, buttons, active
     chips, badges) that stay the same in both themes. Flipping it to a dark color
     made that text invisible in dark mode. */
  --win-title-active: linear-gradient(180deg, #6b4f92 0%, #3a2c5c 100%);
  --win-title-inactive: linear-gradient(180deg, #3a3350 0%, #2a2440 100%);
  --win-title-text: #f1ecff;
  --taskbar-bg: rgba(15, 11, 26, 0.9);
  --panel-btn-bg: #2a2140;
  --panel-btn-hover-bg: #3b2f5b;
  --panel-btn-active-bg: #6b4f92;
  --panel-btn-text: #f1ecff;
  --panel-btn-border: #cabce8;
  --shadow: #000000;
  --desktop-icon-text: #f1ecff;
}

/* Native form controls (range sliders etc.) follow the theme too */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  color-scheme: dark;
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  color-scheme: light;
}
input[type="range"] { accent-color: var(--coral); }

/* ---------- MODERN FONT MODE ---------- */
[data-font="modern"] {
  --font-display: var(--font-modern);
  --font-body: var(--font-modern);
}
[data-font="modern"] .win-titlebar,
[data-font="modern"] .btn,
[data-font="modern"] .icon-label,
[data-font="modern"] .menu-btn span {
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- ARABIC LANGUAGE MODE ---------- */
/* Higher specificity than the plain [data-font] rules above, so these win
   regardless of source order: pixel mode swaps in a pixel-flavored Arabic
   face, modern mode swaps in Cairo. */
[data-lang="ar"][data-font="pixel"] {
  --font-display: var(--font-pixel-arabic);
  --font-body: var(--font-pixel-arabic);
}
[data-lang="ar"][data-font="modern"] {
  --font-display: var(--font-modern-arabic);
  --font-body: var(--font-modern-arabic);
}

/* Content reads right-to-left in Arabic. Window/taskbar *chrome*
   (titlebar traffic lights, taskbar layout, start-menu position) stays
   left-to-right on purpose — like most retro/desktop UIs, the window
   furniture doesn't mirror, only the text and reading-order content do. */
[dir="rtl"] .win-body,
[dir="rtl"] .about-bio,
[dir="rtl"] .contact-list,
[dir="rtl"] .timeline,
[dir="rtl"] .settings-app {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .win-titlebar,
[dir="rtl"] #taskbar,
[dir="rtl"] #start-menu {
  direction: ltr;
}
[dir="rtl"] #start-menu button {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .timeline li {
  padding: 4px 26px 18px 0;
  border-left: none;
  border-right: 2px dashed var(--lilac);
}
[dir="rtl"] .timeline li::before {
  left: auto;
  right: -7px;
}
[dir="rtl"] .contact-list li,
[dir="rtl"] .about-links,
[dir="rtl"] .opt-row {
  direction: rtl;
}

/* =========================================================
   RESET
   ========================================================= */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--ink);
}
img { image-rendering: pixelated; }
/* icons are inserted as raw <svg> markup at a fixed default size;
   make them fill whatever container they're actually placed in */
.icon-glyph svg, .icon-glyph img,
.win-icon svg, .win-icon img,
.menu-btn .pixel-face svg, .menu-btn .pixel-face img,
.chip-icon svg, .chip-icon img {
  width: 100%;
  height: 100%;
  display: block;
}
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--coral); color: var(--white); }

/* pixelated custom cursor */
body, button, .icon, .win-titlebar {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23ffffff" stroke="%232e2444" stroke-width="1.5" d="M4 2 L4 20 L9 16 L12 22 L15 20.5 L12 14.5 L18 14 Z"/></svg>') 4 2, auto;
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}
[data-animations="off"] *, [data-animations="off"] *::before, [data-animations="off"] *::after {
  animation: none !important;
  transition: none !important;
}