/**
 * Theme Color System
 * Centralized color management for the entire application
 * Change colors here to update the entire theme
 */

:root {
    /* Primary Colors */
    --color-primary: #2563EB;           /* Main brand color (blue) */
    --color-primary-light: #3B82F6;    /* Lighter variant */
    --color-primary-dark: #1D4ED8;     /* Darker variant for hovers */
    --color-primary-50: #EFF6FF;       /* Very light background */
    --color-primary-100: #DBEAFE;      /* Light background */
    --color-primary-200: #BFDBFE;      /* Border colors */
    --color-primary-300: #93C5FD;      /* Disabled states */
    --color-primary-400: #60A5FA;      /* Muted elements */
    --color-primary-500: #3B82F6;      /* Default primary */
    --color-primary-600: #2563EB;      /* Active primary */
    --color-primary-700: #1D4ED8;      /* Hover states */
    --color-primary-800: #1E40AF;      /* Pressed states */
    --color-primary-900: #1E3A8A;      /* Dark variant */

    /* Primary with opacity variants */
    --color-primary-5: rgba(37, 99, 235, 0.05);    /* 5% opacity */
    --color-primary-10: rgba(37, 99, 235, 0.1);    /* 10% opacity */
    --color-primary-20: rgba(37, 99, 235, 0.2);    /* 20% opacity */
    --color-primary-30: rgba(37, 99, 235, 0.3);    /* 30% opacity */
    --color-primary-80: rgba(37, 99, 235, 0.8);    /* 80% opacity */

    /* Background Colors */
    --color-background: #0A0714;        /* Main background */
    --color-background-secondary: #0F0A1F;  /* Card backgrounds */
    --color-background-tertiary: #1A1428;   /* Input backgrounds */
    --color-background-quaternary: #2A243B; /* Hover backgrounds */

    /* Text Colors */
    --color-text-primary: #F8FAFC;      /* Primary text (white) */
    --color-text-secondary: #E2E8F0;    /* Secondary text */
    --color-text-muted: #94A3B8;        /* Muted text */
    --color-text-disabled: #64748B;     /* Disabled text */

    /* Border Colors */
    --color-border-primary: #334155;    /* Primary borders */
    --color-border-secondary: #475569;  /* Secondary borders */
    --color-border-muted: #64748B;      /* Muted borders */

    /* Status Colors */
    --color-success: #10B981;           /* Success states */
    --color-success-light: #34D399;     /* Light success */
    --color-success-dark: #059669;      /* Dark success */
    --color-warning: #F59E0B;           /* Warning states */
    --color-warning-light: #FBBF24;     /* Light warning */
    --color-warning-dark: #D97706;      /* Dark warning */
    --color-error: #EF4444;             /* Error states */
    --color-error-light: #F87171;       /* Light error */
    --color-error-dark: #DC2626;        /* Dark error */
    --color-info: #3B82F6;              /* Info states */
    --color-info-light: #60A5FA;        /* Light info */
    --color-info-dark: #2563EB;         /* Dark info */

    /* Interactive Elements */
    --color-button-primary: var(--color-primary);
    --color-button-primary-hover: var(--color-primary-dark);
    --color-button-primary-text: #FFFFFF;
    --color-button-secondary: var(--color-background-tertiary);
    --color-button-secondary-hover: var(--color-background-quaternary);
    --color-button-secondary-text: var(--color-text-secondary);

    /* Form Elements */
    --color-input-background: var(--color-background-tertiary);
    --color-input-border: var(--color-border-primary);
    --color-input-border-focus: var(--color-primary);
    --color-input-text: var(--color-text-primary);
    --color-input-placeholder: var(--color-text-muted);

    /* Gradient Colors */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-80) 100%);
    --gradient-background: linear-gradient(135deg, var(--color-background) 0%, var(--color-background-secondary) 100%);

    /* Shadow Colors */
    --shadow-primary: 0 10px 15px -3px rgba(37, 99, 235, 0.1), 0 4px 6px -2px rgba(37, 99, 235, 0.05);
    --shadow-secondary: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Dark theme variant (optional) */
[data-theme="dark"] {
    --color-background: #000000;
    --color-background-secondary: #0A0A0A;
    --color-background-tertiary: #1A1A1A;
    --color-background-quaternary: #2A2A2A;
}

/* Light theme variant (optional) */
[data-theme="light"] {
    --color-background: #FFFFFF;
    --color-background-secondary: #F8FAFC;
    --color-background-tertiary: #F1F5F9;
    --color-background-quaternary: #E2E8F0;
    --color-text-primary: #1E293B;
    --color-text-secondary: #334155;
    --color-text-muted: #64748B;
}

/* Utility classes for easy use */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark) !important; }
.bg-primary-5 { background-color: var(--color-primary-5) !important; }
.bg-primary-10 { background-color: var(--color-primary-10) !important; }
.bg-primary-20 { background-color: var(--color-primary-20) !important; }

.text-primary { color: var(--color-primary) !important; }
.text-primary-light { color: var(--color-primary-light) !important; }
.text-primary-dark { color: var(--color-primary-dark) !important; }

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

/* Hover variants */
.hover\:bg-primary:hover { background-color: var(--color-primary) !important; }
.hover\:bg-primary-dark:hover { background-color: var(--color-primary-dark) !important; }
.hover\:text-primary:hover { color: var(--color-primary) !important; }
.hover\:border-primary:hover { border-color: var(--color-primary) !important; }

/* Focus variants */
.focus\:border-primary:focus { border-color: var(--color-primary) !important; }
.focus\:ring-primary:focus { 
    --tw-ring-color: var(--color-primary-20) !important;
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width) + var(--tw-ring-width)) var(--tw-ring-color);
}