/* ============================================================
   PERKSLOCAL · COLOR TOKENS
   Purple-and-blue brand system with a gold reward accent.
   Base values first, semantic aliases below.
   ============================================================ */

:root {
  /* ── Primary · Purple (brand identity) ── */
  --pl-purple-700: #3B1378;   /* deepest, gradient end   */
  --pl-purple-600: #4C1D95;   /* Dark Purple · depth     */
  --pl-purple-500: #6D28D9;   /* Rich Purple · CORE      */
  --pl-purple-400: #7C3AED;   /* hover / lift            */
  --pl-purple-300: #A78BFA;   /* light purple · tint     */
  --pl-purple-100: #F5F3FF;   /* Subtle Purple Tint · BG */

  /* ── Secondary · Blue (UI / support) ── */
  --pl-blue-600:   #4F46E5;   /* pressed                 */
  --pl-blue-500:   #6366F1;   /* Primary Blue · CORE     */
  --pl-blue-300:   #818CF8;   /* Soft Blue · hover       */
  --pl-blue-100:   #EEF2FF;   /* Blue Tint · BG          */

  /* ── Accent · Gold (action / value / reward) ── */
  --pl-gold-600:   #B45309;   /* gold text on light      */
  --pl-gold-500:   #F59E0B;   /* Gold / Amber · CORE     */
  --pl-gold-400:   #FBBF24;   /* Light Gold · hover      */
  --pl-gold-100:   #FEF3C7;   /* Gold Tint · badge BG    */

  /* ── Neutrals ── */
  --pl-charcoal:   #1F1F23;   /* primary text            */
  --pl-gray-500:   #6B7280;   /* secondary text          */
  --pl-gray-400:   #9CA3AF;   /* muted / placeholder     */
  --pl-gray-200:   #E5E7EB;   /* borders / dividers      */
  --pl-offwhite:   #FAFAF7;   /* main app background     */
  --pl-white:      #FFFFFF;

  /* ── Semantic status ── */
  --pl-success:    #16A34A;
  --pl-warning:    #F59E0B;
  --pl-danger:     #DC2626;
  --pl-info:       #6366F1;

  /* ── Brand gradients ── */
  --pl-grad-signature: linear-gradient(135deg, #6D28D9 0%, #6366F1 100%); /* @kind color */
  --pl-grad-primary:   linear-gradient(135deg, #6D28D9 0%, #4C1D95 100%); /* @kind color */
  --pl-grad-reward:    linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%); /* @kind color */
  --pl-grad-energy:    linear-gradient(135deg, #6D28D9 0%, #6366F1 50%, #818CF8 100%); /* @kind color */
  --pl-grad-discover:  linear-gradient(135deg, #4C1D95 0%, #6366F1 55%, #16A34A 100%); /* @kind color */

  /* ════ SEMANTIC ALIASES ════ */
  --color-bg:            var(--pl-white);
  --color-surface:       var(--pl-offwhite);
  --color-surface-tint:  var(--pl-purple-100);
  --color-card:          var(--pl-white);

  --text-primary:        var(--pl-charcoal);
  --text-secondary:      var(--pl-gray-500);
  --text-muted:          var(--pl-gray-400);
  --text-accent:         var(--pl-purple-500);
  --text-inverse:        var(--pl-white);

  --brand-primary:       var(--pl-purple-500);
  --brand-primary-dark:  var(--pl-purple-600);
  --brand-secondary:     var(--pl-blue-500);
  --brand-accent:        var(--pl-gold-500);

  --border-subtle:   rgba(31, 31, 35, 0.06);
  --border-default:  rgba(31, 31, 35, 0.10);
  --border-medium:   rgba(31, 31, 35, 0.16);
  --border-accent:   rgba(109, 40, 217, 0.35);
  --border-gold:     rgba(245, 158, 11, 0.35);
}