/* dlcstyles.css for DisneyLiveCams.com - Adapted from MericaCams with Sorcerer Radio palette */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Outfit:wght@300;400;400;500;600;700&display=swap');

:root {
    --bg: #ffffff;                  /* Alabaster Grey - light bg */
    --card-bg: #f1f1f1;             /* White - cards */
    --main: #0e2f50;                /* Deep Space Blue - nav/main bg */
    --secondary: #a882dd;           /* Bright Lavender - accents */

    /* Borders */
    --border-color: rgba(168, 130, 221, 0.4);  /* Lavender opacity */
    --hover-border-color: rgba(49, 133, 252, 0.6);  /* Azure opacity */

    /* Text & highlights */
    --text: #0e2f50;                /* Deep Space Blue - text on light */
    --highlight: #3185fc;           /* Azure Blue - highlights/links */

    /* UI backgrounds */
    --trending-bg: #a882dd;         /* Lavender for trending sections */
    --bg-opacity-70: rgba(255, 255, 255, 0.7);  /* White opacity */

    /* Secondary opacity variants (Lavender-based) */
    --secondary-opacity-10: rgba(168, 130, 221, 0.1);
    --secondary-opacity-20: rgba(168, 130, 221, 0.2);
    --secondary-opacity-30: rgba(168, 130, 221, 0.3);
    --secondary-opacity-40: rgba(168, 130, 221, 0.4);

    /* Text opacity variants (Deep Blue-based) */
    --text-opacity-60: rgba(14, 47, 80, 0.6);
    --text-opacity-70: rgba(14, 47, 80, 0.7);
    --text-opacity-80: rgba(14, 47, 80, 0.8);
    --text-opacity-90: rgba(14, 47, 80, 0.9);

    /* Highlight opacity variants (Azure-based) */
    --highlight-opacity-60: rgba(49, 133, 252, 0.6);
    --highlight-opacity-80: rgba(49, 133, 252, 0.8);
    --highlight-opacity-90: rgba(49, 133, 252, 0.9);
}

.dark {
    --bg: #0e2f50;                 /* Deep Space Blue - dark bg */
    --card-bg: #3185fc;             /* Azure Blue - cards (subtle blue) */
    --main: #0e2f50;                /* Deep Space Blue - consistent nav */
    --secondary: #a882dd;           /* Bright Lavender - accents */

    /* Borders */
    --border-color: rgba(168, 130, 221, 0.6);  /* Lavender opacity */
    --hover-border-color: rgba(49, 133, 252, 0.6);  /* Azure opacity */

    /* Text & highlights */
    --text: #ffffff;                /* White - text on dark */
    --highlight: #a882dd;           /* Lavender - highlights in dark mode */

    /* UI backgrounds */
    --trending-bg: #3185fc;         /* Azure for trending */
    --bg-opacity-70: rgba(14, 47, 80, 0.7);  /* Deep Blue opacity */

    /* Secondary opacity variants (Lavender-based) */
    --secondary-opacity-10: rgba(168, 130, 221, 0.1);
    --secondary-opacity-20: rgba(168, 130, 221, 0.2);
    --secondary-opacity-30: rgba(168, 130, 221, 0.3);
    --secondary-opacity-40: rgba(168, 130, 221, 0.4);

    /* Text opacity variants (White-based) */
    --text-opacity-60: rgba(255, 255, 255, 0.6);
    --text-opacity-70: rgba(255, 255, 255, 0.7);
    --text-opacity-80: rgba(255, 255, 255, 0.8);
    --text-opacity-90: rgba(255, 255, 255, 0.9);

    /* Highlight opacity variants (Lavender-based in dark) */
    --highlight-opacity-60: rgba(168, 130, 221, 0.6);
    --highlight-opacity-80: rgba(168, 130, 221, 0.8);
    --highlight-opacity-90: rgba(168, 130, 221, 0.9);
}

/* Typography (keep from Merica for consistency) */
.font-heading {
    font-family: 'Lexend', system-ui, sans-serif;
}

.font-body {
    font-family: 'Outfit', system-ui, sans-serif;
}

/* Layout helpers */
.max-w-content {
    max-width: 80vw;
}

/* Base */
html,
body {
    background: var(--bg);
    color: var(--text);
}

/* Global card hover border – CSS only */
a.border {
    transition: border-color 0.25s ease;
}

a.border:hover {
    border-color: var(--hover-border-color);
}

/* Navbar divider (adapted with lavender) */
.navbar-divider {
    height: 5px;
    background-color: var(--secondary-opacity-30);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
}