/* Stagom brand palette
   Onyx       CMYK 0,0,0,99  · RGB 2,2,2     · HEX #020202
   Candy Blue CMYK 22,7,0,10 · RGB 178,213,229 · HEX #B2D5E5
*/
:root {
  /* Brand */
  --onyx: #020202;
  --candy-blue: #b2d5e5;
  --candy-blue-rgb: 178, 213, 229;
  --onyx-rgb: 2, 2, 2;

  /* Surfaces */
  --bg-void: var(--onyx);
  --bg-elevated: rgba(var(--candy-blue-rgb), 0.06);
  --glass: rgba(var(--candy-blue-rgb), 0.08);
  --glass-strong: rgba(var(--candy-blue-rgb), 0.12);
  --glass-border: rgba(var(--candy-blue-rgb), 0.22);
  --glass-hover: rgba(var(--candy-blue-rgb), 0.16);

  /* Accents (Candy Blue system — aliases keep component CSS working) */
  --neon-primary: var(--candy-blue);
  --neon-hot: #d4ebf4; /* lighter candy for highlights */
  --neon-cyan: #8fc4d8; /* deeper candy for secondary */
  --neon-glow: rgba(var(--candy-blue-rgb), 0.45);
  --neon-glow-hot: rgba(var(--candy-blue-rgb), 0.55);
  --neon-glow-cyan: rgba(var(--candy-blue-rgb), 0.35);

  /* Text on Onyx — muted/faint follow theme text (not hard-coded brand) */
  --text-primary: #eef6fa;
  --text-muted: rgba(var(--theme-text-rgb), 0.72);
  --text-faint: rgba(var(--theme-text-rgb), 0.48);

  /* Effects */
  --blur-glass: 18px;
  --blur-splash: 20px;
  --radius-pill: 999px;
  --radius-card: 16px;

  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --col-max: 420px;

  /* Background dim for photo/video (set by JS from dashboard, 0–1) */
  --bg-dim-strength: 0.55;

  /* Owner-custom theme (set by JS from dashboard; defaults = brand candy blue) */
  --theme-avatar-ring: var(--candy-blue);
  --theme-avatar-soft: var(--neon-hot);
  --theme-avatar-deep: var(--neon-cyan);
  --theme-avatar-mid: var(--candy-blue);
  --theme-avatar-rgb: var(--candy-blue-rgb);
  --theme-avatar-rgb-a: var(--candy-blue-rgb);
  --theme-avatar-rgb-b: var(--candy-blue-rgb);
  --theme-text: var(--candy-blue);
  --theme-text-soft: var(--neon-hot);
  --theme-text-mid: var(--candy-blue);
  --theme-text-rgb: var(--candy-blue-rgb);
  --theme-text-rgb-a: var(--candy-blue-rgb);
  --theme-text-rgb-b: var(--candy-blue-rgb);
  --theme-icon-border: var(--candy-blue);
  --theme-icon-border-b: var(--neon-hot);
  --theme-icon-mid: var(--candy-blue);
  --theme-icon-rgb: var(--candy-blue-rgb);
  --theme-icon-rgb-a: var(--candy-blue-rgb);
  --theme-icon-rgb-b: var(--candy-blue-rgb);
  --theme-sparkle: var(--candy-blue);
  --theme-sparkle-soft: var(--neon-hot);
  --theme-sparkle-mid: var(--candy-blue);
  --theme-sparkle-rgb: var(--candy-blue-rgb);
  --theme-sparkle-rgb-b: var(--candy-blue-rgb);
  --theme-glow: var(--neon-glow);
  --theme-glow-text: var(--neon-glow);
  /* Footer meta (views / © / brand) — own color + brightness (0–1 alpha) */
  --theme-meta: #e8f4fa;
  --theme-meta-rgb: 232, 244, 250;
  --theme-meta-alpha: 0.78;
}