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

:root {
    --bg: #FBFBFF;
    --card-bg: #FBFBFF;
    --main: #0197F6;
    --secondary: #78BC61;

    /* Borders */
    --border-color: rgba(120, 188, 97, 0.4);
    --hover-border-color: rgba(255, 87, 20, 0.6);

    /* Text & highlights */
    --text: #39393A;
    --highlight: #FF5714;

    /* UI backgrounds */
    --trending-bg: #DCEEF9;
    --bg-opacity-70: rgba(251, 251, 255, 0.7);

    /* Secondary opacity variants */
    --secondary-opacity-10: rgba(120, 188, 97, 0.1);
    --secondary-opacity-20: rgba(120, 188, 97, 0.2);
    --secondary-opacity-30: rgba(120, 188, 97, 0.3);
    --secondary-opacity-40: rgba(120, 188, 97, 0.4);

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

    /* Highlight opacity variants */
    --highlight-opacity-60: rgba(255, 87, 20, 0.6);
    --highlight-opacity-80: rgba(255, 87, 20, 0.8);
    --highlight-opacity-90: rgba(255, 87, 20, 0.9);
}

.dark {
    --bg: #111316;
    --card-bg: #515457;
    --main: #111417;
    --secondary: #5A9C47;

    /* Borders */
    --border-color: rgba(120, 188, 97, 0.6);
    --hover-border-color: rgba(255, 87, 20, 0.6);

    /* Text & highlights */
    --text: #E7ECEF;
    --highlight: #FF5714;

    /* UI backgrounds */
    --trending-bg: #00224B;
    --bg-opacity-70: rgba(17, 19, 22, 0.7);

    /* Secondary opacity variants */
    --secondary-opacity-10: rgba(90, 156, 71, 0.1);
    --secondary-opacity-20: rgba(90, 156, 71, 0.2);
    --secondary-opacity-30: rgba(90, 156, 71, 0.3);
    --secondary-opacity-40: rgba(90, 156, 71, 0.4);

    /* Text opacity variants */
    --text-opacity-60: rgba(231, 236, 239, 0.6);
    --text-opacity-70: rgba(231, 236, 239, 0.7);
    --text-opacity-80: rgba(231, 236, 239, 0.8);
    --text-opacity-90: rgba(231, 236, 239, 0.9);

    /* Highlight opacity variants */
    --highlight-opacity-60: rgba(255, 87, 20, 0.6);
    --highlight-opacity-80: rgba(255, 87, 20, 0.8);
    --highlight-opacity-90: rgba(255, 87, 20, 0.9);
}

/* Typography */
.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 {
    height: 5px;
    background-color: var(--secondary-opacity-30);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05);
}