/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║           🎨  WEBSITE THEME CONFIGURATION FILE              ║
 * ║                                                              ║
 * ║  ⚠️  AUTO-GENERATED — Do not edit manually.                 ║
 * ║  ✅ Use Admin Panel → Settings → Page Design to change.     ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

:root {

    /* ═══════ 🎨 BRAND / ACCENT COLORS ═══════ */
    --brand-primary:    #78ff2f;
    --brand-dark:       #78ff2f;
    --brand-accent:     #62d126;
    --brand-secondary:  #000000;
    --brand-muted:      #000000;

    /* ═══════ 🌑 PAGE BACKGROUND COLORS ═══════ */
    --bg-page:          #0f172a;
    --bg-card:          #1e293b;
    --bg-surface:       #334155;
    --bg-nav:           #0f172a;
    --bg-payment:       #1e293b;

    /* ═══════ ✏️ TEXT COLORS ═══════ */
    --text-primary:     #ffffff;
    --text-secondary:   #94a3b8;
    --text-muted:       #64748b;

    /* ═══════ 📦 PRODUCT CARD COLORS ═══════ */
    --card-bg:              #1e293b;
    --card-border:          #334155;
    --card-border-accent:   #78ff2f;
    --card-selected-bg:     #78ff2f;
    --card-selected-text:   #0f172a;
    --card-hover-bg:        color-mix(in srgb, var(--brand-primary) calc(var(--hover-op-val, 12) * 1%), transparent);
    --card-active-border:   var(--card-border-accent);
    --card-accent:          var(--brand-accent);
    --card-light:           var(--text-primary);
    
    /* Intensity Controls */
    --hover-op-val:         12;
    --select-op-val:        18;

    /* ═══════ 📝 INPUT FIELD COLORS ═══════ */
    --input-bg:             #1e293b;
    --input-border:         #334155;
    --input-text:           #ffffff;

    /* ═══════ 🏷️ BANNER COLORS ═══════ */
    --banner-side-color:    #78ff2f;
    --banner-center-bg:     #1e293b;

    /* ═══════ 🔤 CATEGORY LABEL COLORS ═══════ */
    --category-label-bg:    #78ff2f;
    --category-label-text:  #ffffff;

    /* ═══════ 💬 CHAT BUTTON COLORS ═══════ */
    --chat-btn-bg:          #78ff2f;
    --chat-btn-hover-bg:    #62d126;

    /* ═══════ 🛡️ ADMIN PANEL COLORS ═══════ */
    --admin-primary:        #a855f7;
    --admin-secondary:      #7c3aed;
    --admin-muted:          #f3e8ff;
    --admin-gold:   var(--admin-primary);
    --admin-blue:   var(--admin-secondary);
    --admin-gray:   var(--admin-muted);

    /* ═══════ 🎮 GAME CARD COLORS (HOME) ═══════ */
    --game-card-bg:         #1e293b;
    --game-card-text:       #ffffff;
    --game-card-btn-bg:     #78ff2f;
    --game-card-btn-text:   #000000;
    --footer-icon-color:    #78ff2f;

    /* ═══════ 🔠 TYPOGRAPHY & SHAPE ═══════ */
    --font-family:          'Poppins', 'Kantumruy Pro', system-ui, sans-serif;
    --border-radius:        12px;
    --glass-blur:           12px;

    /* ═══════ 🔗 SEMANTIC ALIASES ═══════ */
    --color-primary:    var(--brand-primary);
    --color-secondary:  var(--brand-dark);
    --color-accent:     var(--brand-accent);

    --primary-color:              var(--brand-primary);
    --secondary-color:            var(--brand-accent);
    --text-color:                 var(--text-primary);
    --text-des-color:             var(--text-secondary);
    --white-color:                var(--bg-card);
    --card-custom:                var(--card-bg);
    --selected-background:        var(--card-selected-bg);
    --selected-background-p:      var(--card-selected-text);
    --paymentMethod-background:   var(--bg-payment);
    --paymentMethod-border:       var(--card-border);
    --card-color:                 var(--brand-primary);
    --card-custom-product-border: var(--card-border-accent);
    --card-custom-product-bg:     var(--card-bg);
    --nav-bg:                     var(--bg-nav);
    --section-bg:                 var(--bg-surface);
    --highlight-blue:             var(--brand-primary);
    --main-bg:                    var(--bg-page);

    /* ═══════ 🚦 STATUS / SEMANTIC COLORS ═══════ */
    --color-danger:         #ef4444;
    --color-warning:        #f59e0b;
    --color-success:        #22c55e;
    --color-info:           #3b82f6;

    /* ═══════ 🚦 STATUS ALIASES (Match Reference Code) ═══════ */
    --status-success:       var(--color-success);
    --status-danger:        var(--color-danger);
    --status-warning:       var(--color-warning);
    --status-info:          var(--color-info);

    /* ═══════ 🔘 BUTTON COLORS ═══════ */
    --btn-primary-bg:       #78ff2f;
    --btn-primary-hover:    #62d126;
    --btn-primary-text:     #0f172a;

    /* ═══════ 🎟️ COMPONENT-SPECIFIC COLORS ═══════ */
    --cat-label-bg:         var(--category-label-bg);
    --cat-label-text:       var(--category-label-text);
    --banner-text:          var(--category-label-text);
    --cp-footer-bg:         var(--bg-page);
    --cp-footer-border:     var(--card-border);
    --payment-icon-bg:      var(--brand-primary);
    --sticky-bar-bg:        var(--bg-page);
    --sticky-bar-shadow:    rgba(0, 0, 0, 0.06);
    --restock-label-bg:     var(--color-warning);
    --restock-label-text:   var(--category-label-text);
    --restock-overlay-bg:   rgba(0, 0, 0, 0.60);
    --disabled-card-text:   var(--text-muted);
    --disabled-card-bg:     rgba(0, 0, 0, 0.08);
    --receipt-btn-bg:       var(--brand-primary);
}