/* Google CDN Font Import for Safari */
@import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap');

/* Color Scheme Variables */
:root {
    /* Interface colors (constant across themes) */
    --interface-text-color: #333;
    --interface-bg: #fff;
    --interface-border: #dee2e6;

    /* Primary elements of color scheme */
    --color-light: #fff; /* White or white-adjacent color, used in many places (container backgrounds, button outlines, light-on-dark text, etc*/
    --color-navbar: #607049; /* Navbar background and navbar buttons */
    --color-primary-accent: #3E2145; /* Primary accent color for titles, achievements, and body buttons */
    --rgba-primary-accent: rgba(62, 33, 69, 0.5); /* Primary accent color focus shadow */
    --color-secondary-accent: #BB83C9; /* Secondary accent color for button focus shadows and audio slider control */
    --color-secondary-accent-darker: #a66fb5; /* Darker variation on secondary accent color for primary button hover states and audio slider control hover */
    --rgba-secondary-accent: rgba(187, 131, 201, 0.5); /* Bright accent color button focus shadow */
    
    /* Bootstrap overrides for color scheme*/
    --bs-dark: #3E2145; /* Primary accent color for Bootstrap overrides */
    --bs-dark-rgb: 62, 33, 69; /* Primary accent color for Bootstrap overrides */
    --bs-primary: #BB83C9; /* Secondary accent color for Bootstrap overrides */
    --bs-primary-rgb: 187, 131, 201; /* Secondary accent color for Bootstrap overrides */

    /* Font families */
    --font-body: 'Georgia', serif;
    --font-title: 'Fleur De Leah', cursive;
}

/* Theme (Day) */
.theme-day {
    --body-bg: #E4F0C0;
    --container-bg: #fff;
    --text-color: #333;
    --title-color: #3E2145;
    --choice-bg: #f8f9fa;
    --choice-border: #ddd;
    --choice-hover-bg: #e9ecef;
}

/* Theme (Night) */
.theme-night {
    --body-bg: #33264D;
    --container-bg: #000;
    --text-color: #fff;
    --title-color: #f1c8fb;
    --choice-bg: #333;
    --choice-border: #444;
    --choice-hover-bg: #444;
}

/* Loading Button Gradient */
.home-content #startGameButton.loading {
    background: linear-gradient(90deg, #7f4a8c 0%, #764681 50%, #3E2145 100%);
}

/* Oak Corner Decorations */
.corner-decoration.top-left {
    top: 70px; /* Account for navbar */
    left: 10px;
    background: url('./images/oak_corner_dark_green_left.svg') no-repeat;
    background-size: contain;
}

.corner-decoration.top-right {
    top: 70px; /* Account for navbar */
    right: 10px;
    background: url('./images/oak_corner_dark_green_right.svg') no-repeat;
    background-size: contain;
}

/* Oak Horizontal Divider */
.hr-decoration {
    opacity: 0.33;
    height: 3.5rem;
    margin-bottom: 2rem;
    margin-top: 0.5rem;
    max-width: 100%;
}