/* Resumemaker.me Brand Colors - UI Optimized */
:root {
    /* Core Brand Colors (Green/Teal Theme) */
    --resume-ca-brand-primary: #14B8A6;     /* Teal */
    --resume-ca-brand-secondary: #0D9488;   /* Dark Teal */
    --resume-ca-brand-tertiary: #2D3748;    /* Dark Gray */
    --resume-ca-brand-white: #F0FDFA;       /* Off White with teal tint */
    
    /* UI-Friendly Primary Colors (Softer for better UX) */
    --resume-ca-primary: #10B981;           /* Green for better readability */
    --resume-ca-primary-hover: #059669;     /* Darker on hover */
    --resume-ca-primary-light: #6EE7B7;     /* Light tint for backgrounds */
    --resume-ca-primary-dark: #047857;      /* Dark tint for text */
    --resume-ca-primary-subtle: #D1FAE5;    /* Very light for subtle backgrounds */
    
    /* UI-Friendly Secondary Colors */
    --resume-ca-secondary: #0D9488;         /* Teal accent */
    --resume-ca-secondary-hover: #0F766E;   /* Darker teal on hover */
    --resume-ca-secondary-light: #5EEAD4;   /* Light teal accent */
    --resume-ca-secondary-dark: #134E4A;    /* Dark teal for text */
    
    /* Neutral Color System */
    --resume-ca-white: #FFFFFF;
    --resume-ca-neutral-50: #F0FDFA;        /* Brand white - lightest with teal tint */
    --resume-ca-neutral-100: #F7FAFC;       /* Very light gray */
    --resume-ca-neutral-200: #EDF2F7;       /* Light gray */
    --resume-ca-neutral-300: #E2E8F0;       /* Medium light gray */
    --resume-ca-neutral-400: #CBD5E0;       /* Medium gray */
    --resume-ca-neutral-500: #A0AEC0;       /* Base gray */
    --resume-ca-neutral-600: #718096;       /* Dark gray */
    --resume-ca-neutral-700: #4A5568;       /* Darker gray */
    --resume-ca-neutral-800: #2D3748;       /* Very dark gray */
    --resume-ca-neutral-900: #1A202C;       /* Darkest */
    
    /* Background System (Clean and Professional) */
    --resume-ca-bg-primary: var(--resume-ca-neutral-50);      /* Main background */
    --resume-ca-bg-secondary: var(--resume-ca-white);         /* Cards/containers */
    --resume-ca-bg-tertiary: var(--resume-ca-neutral-100);    /* Subtle sections */
    --resume-ca-bg-accent: var(--resume-ca-primary-subtle);   /* Accent backgrounds */
    
    /* Status Colors (Professional and Accessible) */
    --resume-ca-success: #10B981;          /* Green - matches primary */
    --resume-ca-warning: #F59E0B;          /* Amber */
    --resume-ca-error: #EF4444;            /* Red for errors */
    --resume-ca-info: #06B6D4;             /* Cyan/Teal for info */
    
    /* Text Colors (High Contrast for Accessibility) */
    --resume-ca-text-primary: var(--resume-ca-neutral-900);   /* Main text */
    --resume-ca-text-secondary: var(--resume-ca-neutral-600); /* Secondary text */
    --resume-ca-text-muted: var(--resume-ca-neutral-500);     /* Muted text */
    --resume-ca-text-inverse: var(--resume-ca-white);         /* White text */
    --resume-ca-text-accent: var(--resume-ca-primary-dark);   /* Accent text */
    
    /* Border Colors */
    --resume-ca-border-light: var(--resume-ca-neutral-200);
    --resume-ca-border-medium: var(--resume-ca-neutral-300);
    --resume-ca-border-dark: var(--resume-ca-neutral-400);
    --resume-ca-border-accent: var(--resume-ca-primary-light);
    
    /* Solid Colors (No Gradients) */
    --resume-ca-gradient-primary: var(--resume-ca-primary);
    --resume-ca-gradient-secondary: var(--resume-ca-neutral-100);
    --resume-ca-gradient-accent: var(--resume-ca-primary-subtle);
    
    /* Shadow Colors (Subtle and Natural) */
    --resume-ca-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --resume-ca-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --resume-ca-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --resume-ca-shadow-accent: 0 4px 6px -1px rgba(16, 185, 129, 0.15);
    
    /* Legacy Variable Mappings for Compatibility */
    --primary-color: var(--resume-ca-primary);
    --secondary-color: var(--resume-ca-secondary);
    --accent-color: var(--resume-ca-primary);
    --heading-color: var(--resume-ca-tertiary);
    --text-color: var(--resume-ca-tertiary);
    --background-color: var(--resume-ca-bg-primary);  /* White Primary Background */
}

/* Dark theme adjustments */
[data-theme="dark"] {
    --resume-ca-primary: #34D399;
    --resume-ca-primary-light: #6EE7B7;
    --resume-ca-secondary: #2DD4BF;
    --resume-ca-neutral-50: #1A202C;
    --resume-ca-neutral-100: #2D3748;
    --resume-ca-neutral-200: #4A5568;
    --resume-ca-bg-primary: var(--resume-ca-neutral-50);
    --resume-ca-bg-secondary: var(--resume-ca-neutral-100);
    --resume-ca-text-primary: #F7FAFC;
    --resume-ca-text-secondary: #E2E8F0;
}

/* Global Background - Use White Primary */
body {
    background-color: var(--resume-ca-bg-primary) !important;
}

.container, .container-fluid {
    background-color: var(--resume-ca-bg-primary) !important;
}

/* Navbar - Clean and Professional */
.main-navbar {
    background-color: var(--resume-ca-bg-secondary) !important;
    border-bottom: 1px solid var(--resume-ca-border-light) !important;
    box-shadow: var(--resume-ca-shadow-sm) !important;
}

.navbar-brand:hover {
    color: var(--resume-ca-primary) !important;
}

.navbar-links a {
    color: var(--resume-ca-text-primary) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.navbar-links a:hover {
    color: var(--resume-ca-primary) !important;
    background-color: var(--resume-ca-bg-accent) !important;
}

.navbar-links a.active {
    background-color: var(--resume-ca-primary) !important;
    color: var(--resume-ca-text-inverse) !important;
    box-shadow: var(--resume-ca-shadow-accent) !important;
}

.user-info {
    color: var(--resume-ca-text-secondary) !important;
}

.hamburger span {
    background: var(--resume-ca-text-primary) !important;
}

/* Button System - Modern and Professional */
.btn-primary {
    background-color: var(--resume-ca-primary) !important;
    border-color: var(--resume-ca-primary) !important;
    color: var(--resume-ca-text-inverse) !important;
    box-shadow: var(--resume-ca-shadow-sm) !important;
    transition: all 0.2s ease !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--resume-ca-primary-dark) !important;
    border-color: var(--resume-ca-primary-dark) !important;
    color: var(--resume-ca-text-inverse) !important;
    box-shadow: var(--resume-ca-shadow-md) !important;
    transform: translateY(-1px) !important;
}

.btn-primary:active,
.btn-primary.active {
    background-color: var(--resume-ca-primary-dark) !important;
    border-color: var(--resume-ca-primary-dark) !important;
    color: var(--resume-ca-text-inverse) !important;
    transform: translateY(0) !important;
}

/* Outline Buttons */
.btn-outline-primary {
    border-color: var(--resume-ca-primary) !important;
    color: var(--resume-ca-primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--resume-ca-primary) !important;
    border-color: var(--resume-ca-primary) !important;
    color: var(--resume-ca-text-inverse) !important;
}

.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--resume-ca-primary-dark) !important;
    border-color: var(--resume-ca-primary-dark) !important;
    color: var(--resume-ca-text-inverse) !important;
}

/* Secondary Buttons */
.btn-secondary {
    background-color: var(--resume-ca-neutral-200) !important;
    border-color: var(--resume-ca-neutral-300) !important;
    color: var(--resume-ca-text-primary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--resume-ca-neutral-300) !important;
    border-color: var(--resume-ca-neutral-400) !important;
    color: var(--resume-ca-text-primary) !important;
}

/* Tab Navigation - Clean and Modern */
.nav-tabs {
    border-bottom: 1px solid var(--resume-ca-border-light) !important;
}

.nav-tabs .nav-link {
    color: var(--resume-ca-text-secondary) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px 6px 0 0 !important;
    transition: all 0.2s ease !important;
}

.nav-tabs .nav-link:hover:not(.active) {
    color: var(--resume-ca-primary) !important;
    background-color: var(--resume-ca-bg-accent) !important;
    border-color: var(--resume-ca-border-light) !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--resume-ca-primary) !important;
    color: var(--resume-ca-text-inverse) !important;
    border-color: var(--resume-ca-primary) !important;
    border-bottom-color: var(--resume-ca-primary) !important;
}

/* Cards and Containers */
.card {
    background-color: var(--resume-ca-bg-secondary) !important;
    border: 1px solid var(--resume-ca-border-light) !important;
    box-shadow: var(--resume-ca-shadow-sm) !important;
    border-radius: 8px !important;
}

.card:hover {
    box-shadow: var(--resume-ca-shadow-md) !important;
    transform: translateY(-2px) !important;
    transition: all 0.2s ease !important;
}

/* Form Controls */
.form-control:focus {
    border-color: var(--resume-ca-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(229, 62, 62, 0.25) !important;
}

/* Alerts */
.alert-primary {
    background-color: var(--resume-ca-primary-subtle) !important;
    border-color: var(--resume-ca-primary-light) !important;
    color: var(--resume-ca-primary-dark) !important;
}

.alert-success {
    background-color: #F0FDF4 !important;
    border-color: #BBF7D0 !important;
    color: var(--resume-ca-success) !important;
}

/* Text Colors */
.text-primary {
    color: var(--resume-ca-primary) !important;
}

.text-secondary {
    color: var(--resume-ca-text-secondary) !important;
}

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

/* Add Item Buttons - Resumemaker.me Branding */
.add-item-btn {
    background-color: var(--resume-ca-primary) !important;
    border-color: var(--resume-ca-primary) !important;
    color: var(--resume-ca-text-inverse) !important;
}

.add-item-btn:hover,
.add-item-btn:focus {
    background-color: var(--resume-ca-primary-dark) !important;
    border-color: var(--resume-ca-primary-dark) !important;
    color: var(--resume-ca-text-inverse) !important;
}

.add-item-btn:active {
    background-color: var(--resume-ca-primary-dark) !important;
    border-color: var(--resume-ca-primary-dark) !important;
    color: var(--resume-ca-text-inverse) !important;
}