/**
 * QickPick Brand Colors - CSS Variables
 * Include this file first in all pages to use consistent brand colors
 */

:root {
    /* Primary Brand Colors */
    --qpick-pink: #E91E8C;
    --qpick-violet: #3B2AA5;

    /* Pink Scale */
    --pink-100: #F48BBF;
    --pink-200: #F062A1;
    --pink-300: #E91E8C;
    --pink-400: #C2186B;
    --pink-500: #8E0046;

    /* Violet Scale */
    --violet-100: #B8B1E8;
    --violet-200: #7C6FE0;
    --violet-300: #3B2AA5;
    --violet-400: #2A1F78;
    --violet-500: #16114A;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--qpick-pink) 0%, var(--qpick-violet) 100%);
    --gradient-primary-reverse: linear-gradient(135deg, var(--qpick-violet) 0%, var(--qpick-pink) 100%);
    --gradient-pink: linear-gradient(135deg, var(--pink-100) 0%, var(--pink-400) 100%);
    --gradient-violet: linear-gradient(135deg, var(--violet-100) 0%, var(--violet-400) 100%);
    --gradient-header: linear-gradient(135deg, var(--qpick-violet) 0%, var(--qpick-pink) 100%);
    --gradient-button: linear-gradient(135deg, var(--qpick-pink) 0%, var(--qpick-violet) 100%);
    --gradient-button-hover: linear-gradient(135deg, var(--pink-400) 0%, var(--violet-400) 100%);

    /* Semantic Colors */
    --color-primary: var(--qpick-pink);
    --color-secondary: var(--qpick-violet);
    --color-accent: var(--pink-200);
    --color-link: var(--qpick-violet);
    --color-link-hover: var(--qpick-pink);

    /* Status Colors */
    /* --color-success: #28a745;
    --color-success-dark: #218838;
    --color-success-light: #d4edda;
    --color-warning: #ffc107;
    --color-warning-dark: #e0a800;
    --color-warning-light: #fff3cd;
    --color-danger: #dc3545;
    --color-danger-dark: #c82333;
    --color-danger-light: #f8d7da;
    --color-info: #17a2b8;
    --color-info-dark: #138496;
    --color-info-light: #d1ecf1;
    --color-blue: #007bff;
    --color-blue-dark: #0056b3;
    --color-gray: #6c757d;
    --color-gray-dark: #545b62; */

    /* SUCCESS (Positive / Completed) – Violet-based */
    --color-success: #3B2AA5;        /* Core Violet */
    --color-success-dark: #2A1F78;   /* Deep Indigo */
    --color-success-light: #E6E3F7;  /* Soft Lavender */

    /* WARNING (Attention / Pending) – Warm Pink */
    --color-warning: #F062A1;        /* Soft Pink */
    --color-warning-dark: #C2186B;   /* Deep Pink */
    --color-warning-light: #FCE4EF;  /* Very Light Pink */

    /* DANGER (Error / Critical) – Strong Brand Pink */
    --color-danger: #E91E8C;         /* QPick Core Pink */
    --color-danger-dark: #8E0046;    /* Dark Berry */
    --color-danger-light: #FAD1E6;   /* Light Blush */

    /* INFO (Neutral / Informational) – Violet Tint */
    --color-info: #7C6FE0;           /* Soft Violet */
    --color-info-dark: #3B2AA5;      /* Core Violet */
    --color-info-light: #ECEBFB;     /* Pale Lavender */

    /* PRIMARY ACTION (Links / Primary Buttons) */
    --color-blue: #3B2AA5;           /* Replace blue with brand violet */
    --color-blue-dark: #2A1F78;

    /* NEUTRALS */
    --color-gray: #89939F;           /* Mid Neutral */
    --color-gray-dark: #414A4F;      /* Dark Neutral */

    /* Text Colors */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-light: #ffffff;

    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-dark: var(--violet-500);
    --bg-light: #f5f5f5;

    /* Border Colors */
    --border-light: #e9ecef;
    --border-medium: #dee2e6;
    --border-dark: #ced4da;

    /* Shadow */
    --shadow-sm: 0 2px 8px rgba(59, 42, 165, 0.1);
    --shadow-md: 0 4px 16px rgba(59, 42, 165, 0.15);
    --shadow-lg: 0 8px 32px rgba(59, 42, 165, 0.2);
    --shadow-pink: 0 4px 15px rgba(233, 30, 140, 0.3);
    --shadow-violet: 0 4px 15px rgba(59, 42, 165, 0.3);

    /* Button Styles */
    --btn-primary-bg: var(--gradient-button);
    --btn-primary-hover: var(--gradient-button-hover);
    --btn-secondary-bg: var(--bg-secondary);
    --btn-secondary-color: var(--text-primary);

    /* Header/Footer */
    --header-bg: var(--gradient-header);
    --footer-bg: var(--violet-500);
    --footer-text: var(--text-light);

    /* Navigation */
    --nav-link-color: var(--text-light);
    --nav-link-hover: var(--pink-100);
    --nav-active-color: var(--qpick-pink);
}

/* Common Button Styles */
.btn-qpick {
    background: var(--gradient-button);
    color: var(--text-light);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-qpick:hover {
    background: var(--gradient-button-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-pink);
    color: var(--text-light);
    text-decoration: none;
}

.btn-qpick-outline {
    background: transparent;
    color: var(--qpick-pink);
    border: 2px solid var(--qpick-pink);
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-qpick-outline:hover {
    background: var(--qpick-pink);
    color: var(--text-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-pink);
    text-decoration: none;
}

.btn-qpick-violet {
    background: var(--gradient-violet);
    color: var(--text-light);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.btn-qpick-violet:hover {
    background: linear-gradient(135deg, var(--violet-200) 0%, var(--violet-500) 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-violet);
    color: var(--text-light);
    text-decoration: none;
}

/* Common Link Styles */
.link-qpick {
    color: var(--qpick-violet);
    text-decoration: none;
    transition: color 0.3s ease;
}

.link-qpick:hover {
    color: var(--qpick-pink);
    text-decoration: underline;
}

/* Badge Styles */
.badge-qpick {
    background: var(--gradient-button);
    color: var(--text-light);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-qpick-outline {
    background: transparent;
    color: var(--qpick-pink);
    border: 1px solid var(--qpick-pink);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

/* Alert Styles */
.alert-qpick {
    background: var(--color-info-light);
    border-left: 4px solid var(--qpick-violet);
    color: var(--violet-400);
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
}

/* Card Styles */
.card-qpick {
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
}

.card-qpick:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.card-qpick-header {
    background: var(--gradient-header);
    color: var(--text-light);
    padding: 20px;
}

/* Form Input Focus */
.form-control-qpick:focus {
    border-color: var(--qpick-pink);
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.15);
    outline: none;
}

/* Selection Color */
::selection {
    background: var(--qpick-pink);
    color: var(--text-light);
}

::-moz-selection {
    background: var(--qpick-pink);
    color: var(--text-light);
}