:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --mobile-header-bar-height: 53px;
  --mobile-nav-bar-height: 52px;
  --mobile-header-height: calc(var(--mobile-header-bar-height) + var(--safe-area-top));
  --mobile-nav-height: calc(var(--mobile-nav-bar-height) + var(--safe-area-bottom));
  --reply-keyboard-inset: 0px;
  --article-cover-height: 200px;
  /* App shell height. Defaults to 100dvh (correct for Safari browser mode,
     where it auto-adjusts to the Safari toolbars). In installed PWA (standalone)
     mode we switch to 100vh, which on iOS standalone equals the full screen
     height — 100dvh / window.innerHeight can be shorter (the "lying viewport"
     bug), which leaves a gap below the fixed bottom nav. */
  --app-height: 100dvh;
  --theme-color-dark: #000000;
  --theme-color-light: #ffffff;
  color-scheme: dark;
  --bg-primary: #000000;
  --bg-secondary: #16181c;
  --bg-tertiary: #202327;
  --bg-hover: #18191a;
  --border-color: #252a2e;
  --text-primary: #e7e9ea;
  --text-secondary: #71767b;
  --accent: #1d9bf0;
  --accent-hover: #1a8cd8;
  --like-color: #f91880;
  --repost-color: #00ba7c;
  --bookmark-color: #1d9bf0;
  --danger: #f4212e;
  --success: #00ba7c;
  --warning: #ffad1f;
  --overlay: rgba(91, 112, 131, 0.4);
  --gold: #e8b923;
  --gold-soft: #2c230c;
  --gray-badge: #aab8c2;
  --skeleton-base: var(--bg-tertiary);
  --skeleton-highlight: var(--border-color);
  --font-sans: 'Geist', 'Vazirmatn', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Canonical afounder design-system aliases.  The product historically used
     the longer app token names above; keeping both sets mapped here lets old
     screens, rebuilt screens and floating overlays share one visual language. */
  --bg: #000000;
  --text: #e7e9ea;
  --muted: #8b98a5;
  --faint: #6a747d;
  --line: #202327;
  --line-strong: #38444d;
  --hover: #0e1113;
  --press: #16181c;
  --accent-soft: #0f2739;
  --green: #00ba7c;
  --green-soft: #07291f;
  --amber: #e0a844;
  --amber-soft: #2a2313;
  --red: #f4212e;
  --like: #f91880;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
}

[data-theme="light"] {
  color-scheme: light;
  --bg-primary: #ffffff;
  --bg-secondary: #f7f9f9;
  --bg-tertiary: #eff3f4;
  --bg-hover: #f7f9f9;
  --border-color: #eff3f4;
  --text-primary: #0f1419;
  --text-secondary: #536471;
  --gray-badge: #536471;
  --overlay: rgba(0, 0, 0, 0.4);
  --skeleton-base: #e1e8ed;
  --skeleton-highlight: var(--bg-primary);
  --bg: #ffffff;
  --text: #0f1419;
  --muted: #536471;
  --faint: #8b98a5;
  --line: #eff3f4;
  --line-strong: #cfd9de;
  --hover: #f7f9f9;
  --press: #eff3f4;
  --accent-soft: #e8f5fd;
  --green-soft: #e6f8f2;
  --amber: #b7791f;
  --amber-soft: #fdf6e7;
  --gold: #c8890a;
  --gold-soft: #fdf3e1;
}

/* Installed PWA (standalone): 100vh is the reliable full-screen height on iOS.
   100dvh / window.innerHeight can be shorter here, which pulls the fixed bottom
   nav up and leaves a gap. Matched both via the display-mode media query and a
   .is-standalone class (set by a pre-paint script) for older iOS fallback. */
@media (display-mode: standalone) {
  :root { --app-height: 100vh; }
}
html.is-standalone { --app-height: 100vh; }

/* Reserve the scrollbar's gutter on every page. Without it a short page (the
   Business tab, Settings) has no scrollbar and a long one does, so the
   centred shell — and with it the whole left sidebar — jumped a couple of
   pixels sideways on every navigation. */
html { scrollbar-gutter: stable; }

/* The default avatar is a person, never a letter. Any avatar tile rendered
   without a photo gets this figure; it paints in `currentColor`, so it reads
   on the legacy gradient tiles (white ink) and on the fx soft tiles (accent
   ink) alike. */
.avatar-figure {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
  pointer-events: none;
}