/* Lankagram — shared design system (single source of truth for theming)
 * "Afterglow": a sunset-inspired identity. A deep twilight-plum canvas under a
 * golden-amber → coral → magenta → violet sunset gradient, with a dusk-violet
 * accent for live/active micro-signals. Every surface (feed, reels, messaging,
 * profile, auth) consumes these tokens so the look stays perfectly consistent. */

:root {
  /* Canvas & surfaces (twilight sky, darkening upward) */
  --bg: #150f20;
  --bg-2: #1c1429;
  --surface: #221830;
  --surface-2: #2d2140;
  --surface-3: #3a2b52;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* Ink (warm whites) */
  --text: #fbf1ef;
  --muted: #c4b4c4;
  --faint: #8b7c93;

  /* Brand — sunset */
  --accent: #ff7a4d;
  --accent-ink: #f2602f;
  --accent-2: #9b6bff;
  --like: #ff4d6d;
  --gold: #ffc24d;
  --grad: linear-gradient(135deg, #ffc24d 0%, #ff7a4d 36%, #ff4d6d 64%, #b14dff 100%);
  --grad-aqua: linear-gradient(135deg, #ff7a4d 0%, #b14dff 100%);

  /* Shape & depth */
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  --glow: 0 8px 26px rgba(255, 122, 77, 0.4);

  /* Layout */
  --nav-h: 58px;
  --top-h: 52px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --maxw: 560px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  color-scheme: dark;
}

/* Creative gradients for text posts and their thumbnails (shared everywhere). */
.bg-sunset { background: linear-gradient(135deg, #ffc24d, #ff5e62); }
.bg-ocean { background: linear-gradient(135deg, #ff7a4d, #b14dff); }
.bg-grape { background: linear-gradient(135deg, #7a4dff, #ff4d6d); }
.bg-mint { background: linear-gradient(135deg, #ff9d2f, #ff4d6d); }
.bg-peach { background: linear-gradient(135deg, #ff5ca8, #ffb24d); }
.bg-noir { background: linear-gradient(135deg, #3a2b52, #150f20); }