/**
 * 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);
}

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