/* ==========================================================================
   Design tokens. Every color, size and timing in the app comes from here.
   Brand: black & white. Color only carries meaning (like, repost, danger...).
   Dark is the default; light follows the system or the user's choice
   (html[data-theme]).
   ========================================================================== */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin-wght.91c1abde2699.woff2") format("woff2-variations"),
       url("../fonts/outfit-latin-wght.91c1abde2699.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Typography: Outfit for interface and headings, the system font for what
     people write (fast on phones, great for long text). */
  --font-ui: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --lh-tight: 1.2;
  --lh-text: 1.5;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --tap: 44px;              /* minimum touch target */
  --icon-size: 22px;
  --topbar-h: 52px;
  --bottomnav-h: 58px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Meaningful colors (same in both themes) */
  --like: #ff2e63;
  --repost: #19c37d;
  --danger: #ff453a;
  --warning: #ff9f0a;
  --success: #30d158;
  --online: #30d158;

  /* Dark theme (default) */
  --bg: #000000;
  --surface: #0c0c0d;
  --surface-2: #161618;
  --surface-3: #232326;
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.24);
  --text: #ffffff;
  --text-2: #a9a9b0;
  --text-3: #707077;
  --accent: #ffffff;
  --on-accent: #000000;
  --accent-soft: rgba(255, 255, 255, 0.08);
  --accent-softer: rgba(255, 255, 255, 0.05);
  --overlay: rgba(0, 0, 0, 0.62);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.7);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.5);
  --skeleton: #19191b;
  --skeleton-shine: #242427;
  --focus: #ffffff;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f2f2f3;
    --surface: #ffffff;
    --surface-2: #f3f3f5;
    --surface-3: #e6e6ea;
    --border: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.22);
    --text: #0a0a0b;
    --text-2: #55555d;
    --text-3: #8b8b93;
    --accent: #000000;
    --on-accent: #ffffff;
    --accent-soft: rgba(0, 0, 0, 0.06);
    --accent-softer: rgba(0, 0, 0, 0.035);
    --overlay: rgba(10, 10, 12, 0.45);
    --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.18);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
    --skeleton: #ececef;
    --skeleton-shine: #f7f7f8;
    --focus: #000000;
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg: #f2f2f3;
  --surface: #ffffff;
  --surface-2: #f3f3f5;
  --surface-3: #e6e6ea;
  --border: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.22);
  --text: #0a0a0b;
  --text-2: #55555d;
  --text-3: #8b8b93;
  --accent: #000000;
  --on-accent: #ffffff;
  --accent-soft: rgba(0, 0, 0, 0.06);
  --accent-softer: rgba(0, 0, 0, 0.035);
  --overlay: rgba(10, 10, 12, 0.45);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.18);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
  --skeleton: #ececef;
  --skeleton-shine: #f7f7f8;
  --focus: #000000;
  color-scheme: light;
}