/* 
   RPL - Rajarata Premier League 
   Design System & Color Tokens
   This is the central place to change the application's basic colors.
   Both Web and Admin interfaces use these variables.
*/

:root {
    /* --- CORE BRAND COLORS --- */
    --primary: #10B981;
    --primary-rgb: 16, 185, 129;
    --primary-dark: var(--primary);
    /* Fallback */
    --primary-light: var(--primary);
    /* Fallback */

    /* Derived Brand Variants (Using opacity to simulate light/dark of the same hue) */
    --green-accent: rgba(var(--primary-rgb), 0.7);
    --green-deep: rgba(var(--primary-rgb), 1);
    --green-teal: rgba(var(--primary-rgb), 0.9);
    --green-mint: rgba(var(--primary-rgb), 0.6);
    --green-lime: rgba(var(--primary-rgb), 0.8);

    /* Legacy Admin Mappings (Ensure one place for changes) */
    --primary-color: var(--primary);
    --dark-green: var(--green-deep);
    --light-green: var(--green-accent);
    --beige: #F8F9FA;
    --yellow: #FFC107;
    --orange: #FFA726;

    /* Semantic Colors */
    --success: #10B981;
    --info: #3B82F6;
    --warning: #F59E0B;
    --danger: #EF4444;

    /* Shadow Helpers (Disabled as per user request) */
    --shadow-green: none;
}

/* --- LIGHT THEME (Default) --- */
[data-theme="light"],
:root:not([data-theme]) {
    --bg-primary: #FFFFFF;
    --bg-primary-rgb: 255, 255, 255;
    --bg-secondary: #F9FAFB;
    --bg-secondary-rgb: 249, 250, 251;
    --text-primary: #111827;
    --text-primary-rgb: 17, 24, 39;
    --text-secondary: #374151;
    --text-muted: #4B5563;
    /* Slightly darker for better visibility */
    --border-color: rgba(0, 0, 0, 0.1);
    --card-bg: #FFFFFF;
    --secondary: #111827;
    /* Dark secondary for light mode contrast */
    --accent: #059669;
    --dark: #111827;
    --light: #F3F4F6;
    --white: #FFFFFF;
    /* White stays white */
    --text-on-primary: #FFFFFF;

    /* Gray Scale */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--green-deep) 100%);
    --gradient-hero: linear-gradient(135deg, rgba(var(--white-rgb, 255, 255, 255), 0.98) 0%, rgba(var(--primary-rgb), 0.95) 100%);
    --gradient-secondary: linear-gradient(135deg, #10B981 0%, #3B82F6 100%);
    --gradient-teal: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    --gradient-mint: linear-gradient(135deg, #6EE7B7 0%, #34D399 100%);
    --gradient-deep: linear-gradient(135deg, #065F46 0%, #064E3B 100%);
}

/* --- DARK THEME --- */
[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-primary-rgb: 17, 24, 39;
    --bg-secondary: #1F2937;
    --bg-secondary-rgb: 31, 41, 55;
    --text-primary: #FFFFFF;
    --text-primary-rgb: 255, 255, 255;
    --text-secondary: #E5E7EB;
    --text-muted: #9CA3AF;
    --border-color: rgba(255, 255, 255, 0.1);
    --card-bg: #1F2937;
    --secondary: #111827;
    --accent: #065F46;
    --dark: #1F2937;
    --light: #F9FAFB;
    --white: #FFFFFF;
    --text-on-primary: #FFFFFF;

    /* Gray Scale (Inverted for Dark Mode) */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    --gradient-primary: linear-gradient(135deg, var(--bg-primary) 0%, var(--primary) 100%);
    --gradient-hero: linear-gradient(135deg, rgba(var(--bg-primary-rgb, 17, 24, 39), 0.98) 0%, rgba(var(--primary-rgb), 0.95) 100%);
    --gradient-secondary: linear-gradient(135deg, #10B981 0%, #3B82F6 100%);
    --gradient-teal: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    --gradient-mint: linear-gradient(135deg, #6EE7B7 0%, #34D399 100%);
    --gradient-deep: linear-gradient(135deg, #065F46 0%, #064E3B 100%);
}

/* Global Visibility Helpers */
label {
    color: var(--text-primary);
    font-weight: 500;
}

.text-muted {
    color: var(--text-muted) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}