/*
 * MBS design tokens — single source of truth for color, type, and layout
 * variables shared by every app (main, blog, note, planner, focus, board,
 * toolbox, resume, todo). Mirrors the system already proven across the
 * original single-file pages.
 */
:root {
  --bg: #0B1120;
  --surface: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.08);
  --accent: #3B82F6;
  --text: #E5E7EB;
  --muted: #94A3B8;
  --glow: rgba(59, 130, 246, 0.35);
  --ok: #22C55E;
  --warn: #F59E0B;
  --err: #EF4444;
  --break: #10B981;
  --longbreak: #8B5CF6;

  --font-en: 'Inter', system-ui, sans-serif;
  --font-fa: 'Vazirmatn', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: var(--font-en);
  --maxw: 1080px;

  /* Elevation + accent primitives shared across every app. Cards/buttons can
     opt into a consistent shadow scale instead of each app hand-rolling its
     own rgba(0,0,0,...) values. */
  --surface-2: rgba(255, 255, 255, 0.06);
  --accent-2: #6366F1;
  --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-2));
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 30px -14px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 28px 64px -24px rgba(0, 0, 0, 0.65);
  --ring: 0 0 0 3px rgba(59, 130, 246, 0.28);

  /* ---- Design-system scales (2026 redesign). Additive only: existing pages
     keep working untouched; new/redesigned pages consume these instead of
     hand-rolling per-page values. ---- */
  /* spacing — 8pt grid */
  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-6: 48px; --sp-8: 64px; --sp-12: 96px;
  /* radius */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 24px; --r-full: 999px;
  /* motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .15s; --dur: .25s; --dur-slow: .45s;
  /* container widths */
  --maxw-wide: 1152px;
}

html[data-theme="light"] {
  --bg: #F7F8FA;
  --surface: rgba(15, 23, 42, 0.03);
  --surface-2: rgba(15, 23, 42, 0.05);
  --border: rgba(15, 23, 42, 0.10);
  --accent: #2563EB;
  --accent-2: #4F46E5;
  --text: #1E293B;
  --muted: #64748B;
  --glow: rgba(37, 99, 235, 0.20);
  --break: #059669;
  --longbreak: #7C3AED;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 10px 30px -14px rgba(15, 23, 42, 0.16);
  --shadow-lg: 0 28px 64px -24px rgba(15, 23, 42, 0.20);
  --ring: 0 0 0 3px rgba(37, 99, 235, 0.22);
}

html[lang="fa"] { --font-body: var(--font-fa); }

/* JetBrains Mono has no Persian glyphs at all, so any element styled with
   .mono / var(--font-mono) — badges, eyebrows, dates, counters — silently
   fell back to a random system font for Farsi text while the rest of the
   page used Vazirmatn. That mismatch is what showed up as "inconsistent
   Persian fonts" across every app. Swapping the mono stack itself to lead
   with Vazirmatn in Farsi mode fixes it everywhere at once, since every
   app pulls from this one shared tokens.css. */
html[lang="fa"] { --font-mono: 'Vazirmatn', 'JetBrains Mono', monospace; }

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg);color:var(--text);font-family:var(--font-body);
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  max-width:100%;transition:background .4s ease,color .4s ease;
}
a{color:inherit;text-decoration:none}
/* Form controls don't inherit font-family from body by default (the UA
   stylesheet gives them a platform font, Arial on most desktop browsers) --
   without this, every button/input on the site silently fell back to Arial
   instead of Vazirmatn/Inter, which is what made the Persian font look
   inconsistent mid-page (e.g. button labels vs. surrounding text). */
button,input,select,textarea,optgroup,option{font-family:inherit;font-size:inherit}
/* An open <select> popup keeps the OS's own (white) background but inherits the
   page's light-on-dark text, so every option that isn't the highlighted one was
   unreadable in dark mode. Paint the list explicitly -- Chromium honours this
   on Windows/Linux/Android, and the highlighted row still uses the system blue.
   --bg is the only solid surface token (--surface/--surface-2 are translucent,
   which a popup can't use). */
select option,select optgroup{background-color:var(--bg);color:var(--text)}
.mono{font-family:var(--font-mono)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---- Shared polish that lifts every page at once (visual only) ---- */

/* Text selection in the brand accent instead of the OS default. */
::selection{background:var(--accent);color:#fff}

/* Themed, slim scrollbars. The chunky default OS scrollbar was the most
   obvious "unstyled" element left on every page. */
*{scrollbar-width:thin;scrollbar-color:var(--surface-2) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--surface-2);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--border);background-clip:padding-box}

/* Fluid, slightly tighter heading rhythm shared by every app's h1–h3. */
h1,h2,h3{line-height:1.2;letter-spacing:-.01em}