/*
 * LudiMesa — Theme Definitions
 * Each theme sets all CSS custom properties.
 * Applied via data-theme="..." on <html>.
 * All components in main.css use var() exclusively — never raw colors.
 */

/* ─── Root fallback: dark_gaming values always present ──────────────────── */
/* Ensures var() tokens resolve even if data-theme is absent or unrecognised  */
:root {
  --bg-page:       #0f1117;
  --bg-surface:    #171b26;
  --bg-card:       #1e2333;
  --bg-card-hover: #242b3d;
  --bg-input:      #0c0f18;
  --bg-overlay:    rgba(15, 17, 23, 0.88);

  --accent:        #d4904a;
  --accent-hover:  #c07838;
  --accent-dim:    rgba(212, 144, 74, 0.14);
  --accent-glow:   0 0 20px rgba(212, 144, 74, 0.40);

  --danger:        #e05555;
  --danger-hover:  #cc3333;
  --success:       #4caf80;
  --warning:       #e8c44a;

  --text-primary:  #e8e4dc;
  --text-secondary:#98a8bc;
  --text-muted:    #606878;
  --text-inverse:  #0f1117;

  --border:        rgba(212, 144, 74, 0.14);
  --border-focus:  rgba(212, 144, 74, 0.55);
  --border-card:   rgba(255, 255, 255, 0.05);

  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.50);
  --shadow-modal:  0 16px 64px rgba(0, 0, 0, 0.80);

  --badge-pending:     rgba(232, 196, 74, 0.15);
  --badge-pending-text:#e8c44a;
  --badge-active:      rgba(76, 175, 128, 0.15);
  --badge-active-text: #4caf80;

  --game-hero-gradient: linear-gradient(135deg, #171b26 0%, #0c0f18 60%, #0f1117 100%);
  --teaser-gradient:    linear-gradient(135deg, #0c0f18 0%, #1e2333 100%);
}

/* ─── Theme 1: dark_gaming (default) ─────────────────────────────────────── */
/*
 * Visual: Deep blue-charcoal surfaces with warm amber accent. Primary text is
 * near-white with a warm tint; secondary text is a cool blue-grey. The amber
 * glow on interactive elements gives it a premium, late-night gaming feel.
 */
[data-theme="dark_gaming"] {
  --bg-page:       #0f1117;
  --bg-surface:    #171b26;
  --bg-card:       #1e2333;
  --bg-card-hover: #242b3d;
  --bg-input:      #0c0f18;
  --bg-overlay:    rgba(15, 17, 23, 0.88);

  --accent:        #d4904a;
  --accent-hover:  #c07838;
  --accent-dim:    rgba(212, 144, 74, 0.14);
  --accent-glow:   0 0 20px rgba(212, 144, 74, 0.40);

  --danger:        #e05555;
  --danger-hover:  #cc3333;
  --success:       #4caf80;
  --warning:       #e8c44a;

  --text-primary:  #e8e4dc;
  --text-secondary:#98a8bc;
  --text-muted:    #606878;
  --text-inverse:  #0f1117;

  --border:        rgba(212, 144, 74, 0.14);
  --border-focus:  rgba(212, 144, 74, 0.55);
  --border-card:   rgba(255, 255, 255, 0.05);

  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.50);
  --shadow-modal:  0 16px 64px rgba(0, 0, 0, 0.80);

  --badge-pending:     rgba(232, 196, 74, 0.15);
  --badge-pending-text:#e8c44a;
  --badge-active:      rgba(76, 175, 128, 0.15);
  --badge-active-text: #4caf80;

  --game-hero-gradient: linear-gradient(135deg, #171b26 0%, #0c0f18 60%, #0f1117 100%);
  --teaser-gradient:    linear-gradient(135deg, #0c0f18 0%, #1e2333 100%);
}

/* ─── Theme 2: midnight_cyber ────────────────────────────────────────────── */
/*
 * Visual: Sleek deep-charcoal dark mode. Electric cyan primary accent with
 * violet-tinted card borders for a subtle purple/cyan neon duality. Text has
 * a cool blue-violet cast. Glows feel sharp and digital.
 */
[data-theme="midnight_cyber"] {
  --bg-page:       #080a12;
  --bg-surface:    #0e1020;
  --bg-card:       #141728;
  --bg-card-hover: #1a1e32;
  --bg-input:      #060810;
  --bg-overlay:    rgba(8, 10, 18, 0.92);

  --accent:        #00e5ff;
  --accent-hover:  #00b8d4;
  --accent-dim:    rgba(0, 229, 255, 0.10);
  --accent-glow:   0 0 24px rgba(0, 229, 255, 0.45);

  --danger:        #ff2d55;
  --danger-hover:  #e0003f;
  --success:       #39d353;
  --warning:       #ffd60a;

  --text-primary:  #e8eaf6;
  --text-secondary:#9094c0;
  --text-muted:    #6870a0;
  --text-inverse:  #080a12;

  --border:        rgba(0, 229, 255, 0.12);
  --border-focus:  rgba(0, 229, 255, 0.50);
  --border-card:   rgba(138, 43, 226, 0.10);

  --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.60);
  --shadow-modal:  0 16px 64px rgba(0, 0, 0, 0.85);

  --badge-pending:     rgba(255, 214, 10, 0.15);
  --badge-pending-text:#ffd60a;
  --badge-active:      rgba(57, 211, 83, 0.15);
  --badge-active-text: #39d353;

  --game-hero-gradient: linear-gradient(135deg, #0e1020 0%, #060810 60%, #080a12 100%);
  --teaser-gradient:    linear-gradient(135deg, #060810 0%, #141728 100%);
}

/* ─── Theme 3: clean_editorial ───────────────────────────────────────────── */
/*
 * Visual: Light mode with an icy lavender-white page and crisp white surfaces.
 * Deep indigo-purple accent for a confident, editorial look. Dark navy text
 * on white gives maximum readability. Shadows are soft and minimal — clean,
 * professional, and airy.
 */
[data-theme="clean_editorial"] {
  --bg-page:       #eef0f8;
  --bg-surface:    #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #f4f5fb;
  --bg-input:      #f8f9fc;
  --bg-overlay:    rgba(238, 240, 248, 0.92);

  --accent:        #5b4fe0;
  --accent-hover:  #4a3ec8;
  --accent-dim:    rgba(91, 79, 224, 0.10);
  --accent-glow:   0 0 20px rgba(91, 79, 224, 0.22);

  --danger:        #dc2626;
  --danger-hover:  #b91c1c;
  --success:       #16a34a;
  --warning:       #d97706;

  --text-primary:  #0f172a;
  --text-secondary:#374151;
  --text-muted:    #6b7280;
  --text-inverse:  #ffffff;

  --border:        rgba(91, 79, 224, 0.14);
  --border-focus:  rgba(91, 79, 224, 0.45);
  --border-card:   rgba(15, 23, 42, 0.08);

  --shadow-card:   0 4px 24px rgba(15, 23, 42, 0.06);
  --shadow-modal:  0 16px 64px rgba(15, 23, 42, 0.18);

  --badge-pending:     rgba(217, 119, 6, 0.10);
  --badge-pending-text:#b45309;
  --badge-active:      rgba(22, 163, 74, 0.10);
  --badge-active-text: #15803d;

  --game-hero-gradient: linear-gradient(135deg, #ffffff 0%, #eef0f8 60%, #e6eaf6 100%);
  --teaser-gradient:    linear-gradient(135deg, #eef0f8 0%, #ffffff 100%);
}