/* PuLoop Official Brand Palette & Design Tokens
   Official brand colors:
   Primary: #7704FA (Electric Purple / Indigo)
   Secondary: #CB0596 (Vivid Fuchsia / Magenta)
   Accent: #F5366E (Radiant Neon Rose / Coral)
*/
:root {
  --brand-purple: #7704FA;
  --brand-magenta: #CB0596;
  --brand-pink: #F5366E;

  --brand-gradient: linear-gradient(135deg, #7704FA 0%, #CB0596 52%, #F5366E 100%);
  --brand-gradient-h: linear-gradient(90deg, #7704FA 0%, #CB0596 52%, #F5366E 100%);
  --brand-gradient-v: linear-gradient(180deg, #7704FA 0%, #CB0596 60%, #F5366E 100%);
  --brand-gradient-subtle: linear-gradient(135deg, rgba(119, 4, 250, 0.08) 0%, rgba(203, 5, 150, 0.06) 50%, rgba(245, 54, 110, 0.08) 100%);
  --brand-gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.96) 0%, rgba(251, 246, 255, 0.92) 100%);
  --brand-gradient-dark: linear-gradient(135deg, #1b0738 0%, #3d055a 50%, #150228 100%);

  --accent: #7704FA;
  --accent-secondary: #CB0596;
  --accent-tertiary: #F5366E;
  --accent-soft: #f4ecff;
  --accent-soft-hover: #ede0fd;
  --accent-glow: rgba(119, 4, 250, 0.35);
  --pink-glow: rgba(245, 54, 110, 0.35);
  --magenta-glow: rgba(203, 5, 150, 0.35);

  --ink: #110926;
  --ink-secondary: #3b3154;
  --muted: #6e6488;
  --line: #ecdffc;
  --line-strong: #d8c2f8;
  --paper: #ffffff;
  --canvas: #fbf9ff;

  --success: #129a58;
  --success-soft: #eafaf1;
  --danger: #e02448;
  --danger-soft: #ffebee;
  --warning: #f59e0b;
  --warning-soft: #fffbeb;

  --radius: 20px;
  --radius-sm: 12px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(119, 4, 250, 0.06);
  --shadow-md: 0 8px 24px -4px rgba(119, 4, 250, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 16px 40px -8px rgba(119, 4, 250, 0.2), 0 4px 12px rgba(203, 5, 150, 0.08);
  --shadow-glow: 0 0 30px rgba(119, 4, 250, 0.28), 0 0 15px rgba(245, 54, 110, 0.2);
}