/* ==================================================================
   amirkral.ir — base layer
   Fonts, design tokens, light/dark themes, resets, shared primitives.
   Every asset referenced here is served from this project; nothing
   is loaded from a CDN.
   ================================================================== */

/* ---------- Vazirmatn (Persian) ---------------------------------- */
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 100; font-display: swap; src: url('../fonts/Vazirmatn-Thin.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/Vazirmatn-ExtraLight.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/Vazirmatn-Light.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Vazirmatn'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/Vazirmatn-Black.woff2') format('woff2'); }

/* ---------- Google Sans Flex (Latin) -----------------------------
   Served from this site, never a CDN — the whole project has no external
   dependencies. The files are not bundled because the family is not ours
   to redistribute; drop them into public/fonts/ and they are picked up
   automatically. Until then the stack falls through to Poppins, so
   nothing breaks by their absence.

   Expected filenames:
     public/fonts/GoogleSansFlex-Regular.woff2   (or the variable file
     public/fonts/GoogleSansFlex.woff2, which covers every weight)
   ------------------------------------------------------------------ */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/GoogleSansFlex.woff2') format('woff2-variations'),
       url('../fonts/GoogleSansFlex-Regular.woff2') format('woff2');
}

/* ---------- Poppins (Latin) -------------------------------------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/PoppinsLatin-Regular.otf') format('opentype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/PoppinsLatin-Bold.otf') format('opentype'); }

/* ---------- Exo 2 (signature) ------------------------------------ */
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Exo2-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Exo2-SemiBold.ttf') format('truetype'); }

/* ==================================================================
   Design tokens
   ================================================================== */
:root {
  --brand: #f68420;
  --brand-contrast: #ffffff;

  /* Light theme readability: the old glass was too transparent and its
     text too light, so cards over a busy wallpaper were hard to read.
     A more opaque panel plus darker text lifts contrast well past the
     accessible threshold while still reading as glass. */
  --glass-blur: 26px;
  --glass-alpha: 0.78;
  --glass-bg: rgba(255, 255, 255, var(--glass-alpha));
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-hover: rgba(255, 255, 255, 0.5);

  --text: #1f2937;
  --text-soft: #4b5563;
  --text-strong: #0f172a;

  --hand: #333333;
  --marker: #444444;
  --dot: #333333;

  --divider: rgba(15, 23, 42, 0.14);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.07), 0 12px 28px rgba(15, 23, 42, 0.09);
  --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.22);

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --z-desktop: 1;
  --z-taskbar: 900;
  --z-menu: 1000;
  --z-window: 500;
  --z-screen: 10000;

  --up: #22c55e;
  --down: #ef4444;

  --scroll-thumb: rgba(71, 85, 105, 0.32);
  --scroll-thumb-hover: rgba(71, 85, 105, 0.55);
}

html.dark {
  --glass-bg: rgba(28, 30, 34, calc(var(--glass-alpha) - 0.08));
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-hover: rgba(0, 0, 0, 0.28);

  --text: #f3f4f6;
  --text-soft: #cbd5e1;
  --text-strong: #ffffff;

  --hand: #e5e7eb;
  --marker: #c7cbd1;
  --dot: #e5e7eb;

  --divider: rgba(255, 255, 255, 0.15);
  --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.45);

  --scroll-thumb: rgba(226, 232, 240, 0.28);
  --scroll-thumb-hover: rgba(226, 232, 240, 0.48);
}

/* ==================================================================
   Reset
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-weight: 300;
  color: var(--text);
  background-color: #101418;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transition: background-image 0.8s ease-in-out, color 0.4s ease;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
}

/* Latin scripts prefer Google Sans Flex when its files are present, and
   fall through to Poppins otherwise — so the site reads correctly either
   way rather than dropping to a system default. */
html[lang='en'] body,
html[lang='tr'] body { font-family: 'Google Sans Flex', 'Poppins', system-ui, sans-serif; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

/* ==================================================================
   Shared primitives
   ================================================================== */
.glass {
  background-color: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  transition: background-color 0.4s ease, border-color 0.4s ease;
}

.card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  /* Dark theme still needs a faint shadow to hold text apart from a bright
     wallpaper. Light theme no longer does — the panel is opaque enough now,
     and a shadow under dark text only made it look smudged. */
  text-shadow: none;
  transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}
html.dark .card { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }

.card__title {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  padding: 0.6rem 1rem;
  cursor: grab;
  flex-shrink: 0;
  color: var(--text-strong);
}
.card__title:active { cursor: grabbing; }

.divider { border-top: 1px solid var(--divider); }

.muted { color: var(--text-soft); }

.pill {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--brand-contrast);
  background-color: var(--brand);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.85rem;
  background-color: var(--brand);
  color: var(--brand-contrast);
  transition: filter 0.18s ease, transform 0.12s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(0.97); }

.icon-btn {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}
.icon-btn:hover { background-color: var(--glass-hover); }
.icon-btn img { width: 1.75rem; height: 1.75rem; object-fit: contain; }
.icon-btn svg { width: 1.4rem; height: 1.4rem; }

/* Scrollbars, unified across the app.
   Deliberately understated: a translucent thumb tinted by the current
   theme, no track, and generous rounding so a scrolling card reads as the
   same object as a non-scrolling one rather than sprouting a heavy grey
   browser bar down its edge. */
.scroll-area {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.scroll-area::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; border-radius: 999px; }
.scroll-area::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 999px;
  transition: background-color 0.2s ease;
}
.scroll-area::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
.scroll-area::-webkit-scrollbar-corner { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .scroll-area { scroll-behavior: auto; }
}

/* ==================================================================
   Tooltips
   A single fixed-position bubble (see js/core/tooltip.js) rather than a
   pseudo-element on each trigger — pseudo-elements were clipped by
   scrolling cards and buried under windows by stacking contexts.
   ================================================================== */
.tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12000;              /* above windows, menus and the taskbar */
  max-width: 18rem;
  padding: 0.42rem 0.72rem;
  border-radius: 9px;
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-size: 0.73rem;
  font-weight: 500;
  line-height: 1.7;
  text-align: center;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px) scale(0.97);
  transition: opacity 0.14s var(--ease), transform 0.14s var(--ease);
}
.tip.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* Arrow, pointed at the trigger via --tip-arrow. */
.tip::after {
  content: '';
  position: absolute;
  left: var(--tip-arrow, 50%);
  margin-left: -5px;
  border: 5px solid transparent;
}
.tip[data-placement='top']::after {
  top: 100%;
  border-top-color: rgba(15, 23, 42, 0.95);
}
.tip[data-placement='bottom']::after {
  bottom: 100%;
  border-bottom-color: rgba(15, 23, 42, 0.95);
}

html.dark .tip { background: rgba(2, 6, 23, 0.96); border-color: rgba(255, 255, 255, 0.16); }
html.dark .tip[data-placement='top']::after { border-top-color: rgba(2, 6, 23, 0.96); }
html.dark .tip[data-placement='bottom']::after { border-bottom-color: rgba(2, 6, 23, 0.96); }

/* Spinner */
.spinner {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0 auto;
  border: 2px solid var(--divider);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Entrance animation for desktop items */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in {
  opacity: 0;
  animation: fade-in-up 0.55s var(--ease) forwards;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}
.shake { animation: shake 0.8s cubic-bezier(.36, .07, .19, .97) both; }

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