/**
 * ============================================================================
 * SAIKOCASH CENTRALIZED THEME SYSTEM
 * ============================================================================
 * EDIT THIS FILE TO CHANGE THE ENTIRE WEBSITE & ADMIN PANEL COLOR SCHEME.
 * 
 * Changing --theme-primary, --theme-background, --theme-surface, etc.,
 * automatically updates the entire application theme globally.
 * ============================================================================
 */

:root {
    /* ------------------------------------------------------------------------
     * Core Teal / Turquoise Theme Palette (Current Active Theme)
     * ------------------------------------------------------------------------ */
    --theme-background: #05090C;
    --theme-surface: #0A1319;
    --theme-primary: #00E0D0;
    --theme-primary-hover: #00C9BC;
    --theme-border: #005C5B;
    --theme-secondary: #008080;
    --theme-text: #FFFFFF;
    --theme-muted: #8A9A9D;
    --theme-dark-text: #05090C;
    --theme-glow: rgba(0, 224, 208, 0.25);

    /* ------------------------------------------------------------------------
     * Semantic UI Color & Property System
     * ------------------------------------------------------------------------ */
    --bg-main: var(--theme-background);
    --bg-surface: var(--theme-surface);
    --bg-card: var(--theme-surface);
    --bg-input: #071016;
    --bg-hover: rgba(0, 224, 208, 0.08);
    --bg-active: rgba(0, 224, 208, 0.12);

    --color-primary: var(--theme-primary);
    --color-primary-hover: var(--theme-primary-hover);
    --color-secondary: var(--theme-secondary);
    --color-border: var(--theme-border);
    --color-border-hover: var(--theme-primary);
    
    --color-text: var(--theme-text);
    --color-text-muted: var(--theme-muted);
    --color-text-inverse: var(--theme-dark-text);

    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #3B82F6;

    --color-overlay: rgba(5, 9, 12, 0.85);
    --color-shadow: rgba(0, 0, 0, 0.6);
    --color-glow: var(--theme-glow);

    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;

    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;

    /* Tailwind Compatibility Mappings */
    --tw-ring-color: var(--color-primary);
}

/* ----------------------------------------------------------------------------
 * EXAMPLE THEME PRESETS (DO NOT UNCOMMENT UNLESS SWITCHING THEMES)
 * ----------------------------------------------------------------------------
 *
 * --- TEAL THEME (DEFAULT) ---
 * --theme-background: #05090C;
 * --theme-surface: #0A1319;
 * --theme-primary: #00E0D0;
 * --theme-primary-hover: #00C9BC;
 * --theme-border: #005C5B;
 * --theme-secondary: #008080;
 * --theme-text: #FFFFFF;
 * --theme-muted: #8A9A9D;
 * --theme-dark-text: #05090C;
 * --theme-glow: rgba(0, 224, 208, 0.25);
 *
 * --- GOLD THEME ---
 * --theme-background: #0B0A07;
 * --theme-surface: #14120D;
 * --theme-primary: #F59E0B;
 * --theme-primary-hover: #D97706;
 * --theme-border: #78350F;
 * --theme-secondary: #B45309;
 * --theme-text: #FFFFFF;
 * --theme-muted: #A1A1AA;
 * --theme-dark-text: #0B0A07;
 * --theme-glow: rgba(245, 158, 11, 0.25);
 *
 * --- PURPLE THEME ---
 * --theme-background: #09070D;
 * --theme-surface: #120D1A;
 * --theme-primary: #A855F7;
 * --theme-primary-hover: #9333EA;
 * --theme-border: #581C87;
 * --theme-secondary: #7E22CE;
 * --theme-text: #FFFFFF;
 * --theme-muted: #A1A1AA;
 * --theme-dark-text: #09070D;
 * --theme-glow: rgba(168, 85, 247, 0.25);
 *
 * --- EMERALD THEME ---
 * --theme-background: #050C08;
 * --theme-surface: #0A1A10;
 * --theme-primary: #10B981;
 * --theme-primary-hover: #059669;
 * --theme-border: #065F46;
 * --theme-secondary: #047857;
 * --theme-text: #FFFFFF;
 * --theme-muted: #9CA3AF;
 * --theme-dark-text: #050C08;
 * --theme-glow: rgba(16, 185, 129, 0.25);
 * ----------------------------------------------------------------------------
 */

/* ----------------------------------------------------------------------------
 * Global CSS Variable Overrides & Utilities
 * ----------------------------------------------------------------------------
 */
body {
    background-color: var(--bg-main) !important;
    color: var(--color-text) !important;
}

.bg-theme-main { background-color: var(--bg-main) !important; }
.bg-theme-surface { background-color: var(--bg-surface) !important; }
.bg-theme-card { background-color: var(--bg-card) !important; }
.bg-theme-input { background-color: var(--bg-input) !important; }
.bg-theme-primary { background-color: var(--color-primary) !important; color: var(--color-text-inverse) !important; }
.bg-theme-secondary { background-color: var(--color-secondary) !important; }
.bg-theme-hover:hover { background-color: var(--bg-hover) !important; }

.text-theme-primary { color: var(--color-primary) !important; }
.text-theme-secondary { color: var(--color-secondary) !important; }
.text-theme-muted { color: var(--color-text-muted) !important; }
.text-theme-main { color: var(--color-text) !important; }
.text-theme-inverse { color: var(--color-text-inverse) !important; }

.border-theme { border-color: var(--color-border) !important; }
.border-theme-primary { border-color: var(--color-primary) !important; }

.shadow-theme-glow { box-shadow: 0 0 20px var(--color-glow) !important; }
.shadow-theme-glow-sm { box-shadow: 0 0 10px var(--color-glow) !important; }
.shadow-theme-glow-lg { box-shadow: 0 0 35px var(--color-glow) !important; }

/* Global Button Styles */
.btn-theme-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px var(--color-glow) !important;
    transition: var(--transition-normal);
}

.btn-theme-primary:hover {
    background-color: var(--color-primary-hover) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: 0 6px 20px var(--color-glow) !important;
    transform: translateY(-1px);
}

.btn-theme-secondary {
    background-color: transparent !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
    transition: var(--transition-normal);
}

.btn-theme-secondary:hover {
    border-color: var(--color-primary) !important;
    background-color: var(--bg-hover) !important;
    color: var(--color-primary) !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}