/* ============================================
   PIN MY BEAUTY - THEME COLOR VARIABLES

   THEME 1: BOLD LUXE
   High-end, sophisticated, Sephora-inspired
   ============================================ */

:root {
    /* PRIMARY COLORS */
    --primary-dark: #0A0A0A;
    --primary-light: #FAFAFA;

    /* ACCENT COLORS */
    --accent-main: #8B2635;        /* Deep Burgundy - Primary CTA */
    --accent-secondary: #B76E79;   /* Dusty Rose - Hover states */
    --accent-tertiary: #D4AF37;    /* Champagne Gold - Highlights */
    --accent-soft: #E5C1C5;        /* Soft Mauve - Tags */

    /* TEXT COLORS */
    --text-primary: #2C2C2C;
    --text-secondary: #6B6B6B;
    --text-light: #FFFFFF;
    --text-muted: #999999;

    /* BACKGROUND COLORS */
    --bg-cream: #F5F5F5;
    --bg-white: #FFFFFF;
    --bg-light-neutral: #F0F0F0;
    --bg-overlay: rgba(10, 10, 10, 0.8);

    /* BORDER COLORS */
    --border-main: #CCCCCC;
    --border-light: #E5E5E5;
    --border-dark: #999999;

    /* BUTTON COLORS */
    --btn-primary-bg: #8B2635;
    --btn-primary-hover: #6D1E2A;
    --btn-secondary-bg: #0A0A0A;
    --btn-secondary-hover: #2C2C2C;
    --btn-text: #FFFFFF;

    /* TAG/BADGE COLORS */
    --tag-bg: #E5C1C5;
    --tag-text: #0A0A0A;
    --tag-hover-bg: #B76E79;

    /* CARD COLORS */
    --card-bg: #FFFFFF;
    --card-shadow: rgba(0, 0, 0, 0.1);
    --card-hover-shadow: rgba(0, 0, 0, 0.18);
    --card-border: #E5E5E5;

    /* HEADER/FOOTER */
    --header-bg: #FFFFFF;
    --header-text: #0A0A0A;
    --header-hover: #8B2635;
    --footer-bg: #000000;

    /* SIDEBAR */
    --sidebar-title-bg: #0A0A0A;
    --sidebar-title-text: #FFFFFF;
    --sidebar-item-hover: #F5F5F5;

    /* SHADOWS */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* ============================================
   APPLY THEME VARIABLES TO COMMON ELEMENTS
   ============================================ */

body {
    background-color: var(--bg-cream) !important;
    color: var(--text-primary) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-dark) !important;
}

a {
    color: var(--accent-main);
}

a:hover {
    color: var(--accent-secondary);
}

/* Bootstrap button overrides */
.btn-primary {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
    color: var(--btn-text) !important;
}

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

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

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

/* Bootstrap card overrides */
.card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: var(--shadow-md);
}

.card:hover {
    box-shadow: var(--shadow-hover);
}

/* Bootstrap badge overrides */
.badge {
    background-color: var(--tag-bg) !important;
    color: var(--tag-text) !important;
}

/* Bootstrap navbar overrides */
.navbar {
    background-color: var(--header-bg) !important;
}

.navbar-brand,
.navbar-nav .nav-link {
    color: var(--header-text) !important;
}

.navbar-nav .nav-link:hover {
    color: var(--header-hover) !important;
}

/* Form controls */
.form-control {
    border-color: var(--border-main) !important;
}

.form-control:focus {
    border-color: var(--accent-main) !important;
    box-shadow: 0 0 0 0.2rem rgba(139, 38, 53, 0.25) !important;
}

/* Borders */
hr {
    border-color: var(--border-main) !important;
}