/* 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 — Slate Cyan (Facebook Inspired, Dark Mode Optimized) */
  --accent: #2D88FF;
  --accent-ink: #4E9BFF;
  --accent-2: #20E3B2;
  --like: #1877F2;
  --gold: #F5C33B;
  --grad: linear-gradient(135deg, #20E3B2 0%, #2D88FF 40%, #1877F2 75%, #4460A0 100%);
  --grad-aqua: linear-gradient(135deg, #20E3B2 0%, #2D88FF 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);
}