/**
 * Theme Variables Layer — vbClub Design System
 *
 * This file BRIDGES the theme tokens (from config/theme.php) to the existing
 * CSS variables used throughout the project.
 *
 * HOW IT WORKS:
 *   1. theme.php defines canonical tokens (--t-primary, --t-bg, etc.)
 *   2. This file maps them to EXISTING variables (--primary, --bg, etc.)
 *   3. All existing CSS continues to work — zero breaking changes
 *   4. To switch themes: change theme.php → both layers update
 *
 * WHY NOT JUST RENAME ALL VARIABLES?
 *   Because style.css has 100+ references to --primary, --bg, etc.
 *   program.php has its own --vbp-* system.
 *   Renaming everything is a huge risky refactor for zero user value.
 *   Instead, we add an upstream layer that feeds into the existing one.
 *
 * LOADING ORDER:
 *   1. theme.css (this file) — defines --t-* canonical + maps to --existing
 *   2. style.css — uses --primary, --bg, etc. (unchanged)
 *   3. program.php vbp_styles() — uses --vbp-* (unchanged)
 *
 * TO ADD A NEW THEME:
 *   1. Create config/themes/mytheme.php with get_theme_tokens()
 *   2. In config/theme.php, switch which file is loaded based on config
 *   3. Regenerate this file (or use PHP inline: <?= theme_css_vars() ?>)
 */

/* ══════════════════════════════════════════════════════════════════════════
   CANONICAL THEME TOKENS (--t-*)
   Source of truth. Changed by theme config only.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand colors ── */
  --t-primary:       #5B3FA8;
  --t-primary-dark:  #2D0F5A;
  --t-primary-light: #7c5fc4;
  --t-primary-rgb:   91,63,168;
  --t-accent:        #F5C800;
  --t-accent-dark:   #d4a900;
  --t-accent-rgb:    245,200,0;
  --t-pink:          #E91E63;
  --t-pink-light:    #fdf2f8;

  /* ── Backgrounds ── */
  --t-bg:            #f5f3ff;
  --t-card:          #ffffff;
  --t-surface:       #fffbeb;

  /* ── Text ── */
  --t-text:          #1a1a2e;
  --t-text-muted:    #6b7280;
  --t-text-subtle:   #9ca3af;

  /* ── Borders ── */
  --t-border:        #e5e7eb;

  /* ── Status ── */
  --t-danger:        #e53e3e;
  --t-success:       #4CAF50;

  /* ── Shape ── */
  --t-radius:        14px;
  --t-radius-sm:     8px;

  /* ── Elevation ── */
  --t-shadow:        0 2px 20px rgba(91,63,168,0.10);
  --t-shadow-btn:    0 4px 14px rgba(91,63,168,0.30);
  --t-shadow-focus:  0 0 0 3px rgba(91,63,168,0.15);

  /* ── Typography ── */
  --t-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* ── Motion ── */
  --t-transition:    0.15s;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK THEME OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --t-bg:          #100d1c;
  --t-card:        #1a1630;
  --t-text:        #ede8ff;
  --t-text-muted:  #9ca3af;
  --t-text-subtle: #6b7280;
  --t-border:      #374151;
  /* Shadow adjusts for dark — less purple, more neutral */
  --t-shadow:      0 2px 20px rgba(0,0,0,0.25);
  --t-shadow-btn:  0 4px 14px rgba(0,0,0,0.35);
}

/* ══════════════════════════════════════════════════════════════════════════
   BRIDGE: --t-* → EXISTING VARIABLES
   Maps canonical tokens to the variables already used in style.css
   This is the compatibility layer — remove once all CSS is migrated.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --primary:       var(--t-primary);
  --primary-dark:  var(--t-primary-dark);
  --primary-light: var(--t-primary-light);
  --accent:        var(--t-accent);
  --accent-dark:   var(--t-accent-dark);
  --bg:            var(--t-bg);
  --card:          var(--t-card);
  --card-bg:       var(--t-card);
  --text:          var(--t-text);
  --text-muted:    var(--t-text-muted);
  --border:        var(--t-border);
  --danger:        var(--t-danger);
  --success:       var(--t-success);
  --pink:          var(--t-pink);
  --pink-light:    var(--t-pink-light);
  --radius:        var(--t-radius);
  --radius-sm:     var(--t-radius-sm);
  --shadow:        var(--t-shadow);
  --font:          var(--t-font);
}

[data-theme="dark"] {
  --bg:           var(--t-bg);
  --card:         var(--t-card);
  --card-bg:      var(--t-card);
  --text:         var(--t-text);
  --text-muted:   var(--t-text-muted);
  --border:       var(--t-border);
  --shadow:       var(--t-shadow);
}

/* ══════════════════════════════════════════════════════════════════════════
   VIOLET PREMIUM THEME — data-theme="violet"
   Deep dark purple aesthetic with yellow CTA accents.
   Inspired by premium fitness / digital product design.
   ══════════════════════════════════════════════════════════════════════════ */

[data-theme="violet"] {
  /* ── Brand — deeper purple spectrum ── */
  --t-primary:       #7B5CC8;
  --t-primary-dark:  #5B3FA8;
  --t-primary-light: #9d85d6;
  --t-primary-rgb:   123,92,200;
  --t-accent:        #F5C800;
  --t-accent-dark:   #d4a900;
  --t-accent-rgb:    245,200,0;

  /* ── Backgrounds — deep dark layers ── */
  --t-bg:            #0e0920;
  --t-bg-2:          #140d2a;
  --t-bg-3:          #1c1238;
  --t-card:          #1a1432;
  --t-surface:       #1c1238;

  /* ── Text — high contrast on dark ── */
  --t-text:          #f0ecff;
  --t-text-muted:    #9d92c4;
  --t-text-subtle:   #6b5f8a;

  /* ── Borders — subtle purple glow ── */
  --t-border:        rgba(123,92,200,0.25);

  /* ── Status — yellow success to match violet aesthetic ── */
  --t-danger:        #f56565;
  --t-success:       #F5C800;
  --t-success-soft:  rgba(245,200,0,0.10);
  --t-success-muted: #d4a900;
  --t-pink:          #f687b3;
  --t-pink-light:    rgba(246,135,179,0.1);

  /* ── Shape — slightly more rounded ── */
  --t-radius:        16px;
  --t-radius-sm:     10px;

  /* ── Elevation — purple glow shadows ── */
  --t-shadow:        0 4px 24px rgba(91,63,168,0.20);
  --t-shadow-btn:    0 4px 20px rgba(245,200,0,0.25);
  --t-shadow-focus:  0 0 0 3px rgba(123,92,200,0.30);

  /* ── Typography — Unbounded for headings ── */
  --t-font-display:  'Unbounded', var(--t-font);

  /* ── Extra tokens for violet ── */
  --t-nav-bg:        rgba(14,9,32,0.88);
  --t-nav-border:    rgba(123,92,200,0.2);
  --t-input-bg:      #140d2a;
  --t-input-border:  rgba(123,92,200,0.3);
  --t-glow-primary:  rgba(91,63,168,0.35);
  --t-glow-accent:   rgba(245,200,0,0.08);
}

/* Violet bridge layer — same pattern as dark */
[data-theme="violet"] {
  --bg:           var(--t-bg);
  --bg-2:         var(--t-bg-2);
  --bg-3:         var(--t-bg-3);
  --card:         var(--t-card);
  --card-bg:      var(--t-card);
  --text:         var(--t-text);
  --text-muted:   var(--t-text-muted);
  --border:       var(--t-border);
  --shadow:       var(--t-shadow);
  --danger:       var(--t-danger);
  --success:      var(--t-success);
  --pink:         var(--t-pink);
  --pink-light:   var(--t-pink-light);
  --bg-alt:       var(--t-bg-2);
}

/* ── Layout refinements ──────────────────────────────────────────── */
body .main { padding-top: 4px; }