/* Logo Colors Analysis and Brand Color System
 * Based on logo analysis:
 * - Dark Blue (left side, "Yann" text): ~#1e266d or darker
 * - Medium Blue (right side, "Exchange" text, tagline): ~#008fc8 or similar
 * - Gradient: Dark blue to medium blue
 */

/* Brand Colors extracted from Logo */
:root {
    /* Logo Primary Colors */
    --logo-dark-blue: #1e266d;        /* Dark blue from logo (left side, "Yann") */
    --logo-medium-blue: #008fc8;     /* Medium blue from logo (right side, "Exchange") */
    --logo-light-blue: #4a90e2;      /* Lighter blue for accents */
    --logo-blue-gradient-start: #1e266d;
    --logo-blue-gradient-end: #008fc8;
    
    /* Brand Color Palette */
    --brand-primary: var(--logo-medium-blue);      /* Main brand color */
    --brand-primary-dark: var(--logo-dark-blue);   /* Darker variant */
    --brand-primary-light: var(--logo-light-blue); /* Lighter variant */
    --brand-gradient: linear-gradient(135deg, var(--logo-dark-blue) 0%, var(--logo-medium-blue) 100%);
}

/* Update theme colors to match logo */
:root[data-theme="light"],
:root {
    --primary-color: #008fc8;           /* Medium blue from logo */
    --primary-color-hover: #0066a3;     /* Darker blue for hover */
    --primary-color-light: #4a90e2;     /* Lighter blue for accents */
    --primary-color-dark: #1e266d;      /* Dark blue from logo */
    --secondary-color: #1e266d;         /* Dark blue for headings */
    --accent-color: #008fc8;            /* Medium blue accent */
}

/* Dark theme - keep blue but adjust brightness */
:root[data-theme="dark"] {
    --primary-color: #4a90e2;           /* Lighter blue for dark mode */
    --primary-color-hover: #6ba3f0;     /* Even lighter for hover */
    --primary-color-light: #7bb3ff;     /* Very light blue */
    --primary-color-dark: #1e4d8c;       /* Darker blue variant */
    --secondary-color: #e6edf3;         /* Light text */
    --accent-color: #4a90e2;            /* Medium blue accent */
}

/* Blue theme - enhance to match logo better */
:root[data-theme="blue"] {
    --primary-color: #008fc8;           /* Medium blue from logo */
    --primary-color-hover: #0066a3;     /* Darker blue */
    --primary-color-light: #4a90e2;     /* Lighter blue */
    --primary-color-dark: #1e266d;      /* Dark blue from logo */
    --secondary-color: #1e266d;         /* Dark blue */
    --accent-color: #008fc8;            /* Medium blue */
}

/* Logo-inspired gradient utilities */
.logo-gradient {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-gradient-bg {
    background: var(--brand-gradient);
}

/* Apply logo colors to key elements */
.navbar-brand h4 {
    background: linear-gradient(135deg, var(--logo-dark-blue) 0%, var(--logo-medium-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Buttons with logo gradient */
.btn-logo-gradient {
    background: var(--brand-gradient);
    color: white;
    border: none;
}

.btn-logo-gradient:hover {
    background: linear-gradient(135deg, var(--logo-medium-blue) 0%, var(--logo-light-blue) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 143, 200, 0.3);
}

/* Card borders with logo colors */
.card-logo-accent {
    border-top: 3px solid;
    border-image: var(--brand-gradient) 1;
}

/* Text with logo colors */
.text-logo-primary {
    color: var(--logo-medium-blue);
}

.text-logo-dark {
    color: var(--logo-dark-blue);
}

/* Icon backgrounds with logo gradient */
.icon-logo-gradient {
    background: var(--brand-gradient);
    color: white;
}