/* Variables and Color Palette - DubnCo */

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

/* Gros Ventre Font - Local */
@font-face {
    font-family: 'Gros Ventre';
    src: url('/fonts/gros_ventre/Gros%20Ventre%20Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gros Ventre';
    src: url('/fonts/gros_ventre/Gros%20Ventre%20Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gros Ventre';
    src: url('/fonts/gros_ventre/Gros%20Ventre%20Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gros Ventre';
    src: url('/fonts/gros_ventre/Gros%20Ventre%20Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gros Ventre';
    src: url('/fonts/gros_ventre/Gros%20Ventre%20Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* Moon Font - Local */
@font-face {
    font-family: 'Moon';
    src: url('/fonts/moontypeface-free-font/Moon%20Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Moon';
    src: url('/fonts/moontypeface-free-font/Moon%20Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Mpompa Font - Local */
@font-face {
    font-family: 'Mpompa';
    src: url('/fonts/mpompa/Mpompa.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Sugar Snow Font - Local */
@font-face {
    font-family: 'Sugar Snow';
    src: url('/fonts/sugar_snow/Sugar%20Snow.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Playfulist Font - Local */
@font-face {
    font-family: 'Playfulist';
    src: url('/fonts/playfulist/Playfulist.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* G8321 Font - Local (Complete family with all weights) */
@font-face {
    font-family: 'G8321';
    src: url('/fonts/G8321-Typeface/fonts/webfonts/G8321-Thin.woff2') format('woff2'),
         url('/fonts/G8321-Typeface/fonts/webfonts/G8321-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'G8321';
    src: url('/fonts/G8321-Typeface/fonts/webfonts/G8321-ExtraLight.woff2') format('woff2'),
         url('/fonts/G8321-Typeface/fonts/webfonts/G8321-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'G8321';
    src: url('/fonts/G8321-Typeface/fonts/webfonts/G8321-Light.woff2') format('woff2'),
         url('/fonts/G8321-Typeface/fonts/webfonts/G8321-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'G8321';
    src: url('/fonts/G8321-Typeface/fonts/webfonts/G8321-Regular.woff2') format('woff2'),
         url('/fonts/G8321-Typeface/fonts/webfonts/G8321-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'G8321';
    src: url('/fonts/G8321-Typeface/fonts/webfonts/G8321-Medium.woff2') format('woff2'),
         url('/fonts/G8321-Typeface/fonts/webfonts/G8321-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'G8321';
    src: url('/fonts/G8321-Typeface/fonts/webfonts/G8321-SemiBold.woff2') format('woff2'),
         url('/fonts/G8321-Typeface/fonts/webfonts/G8321-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'G8321';
    src: url('/fonts/G8321-Typeface/fonts/webfonts/G8321-Bold.woff2') format('woff2'),
         url('/fonts/G8321-Typeface/fonts/webfonts/G8321-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'G8321';
    src: url('/fonts/G8321-Typeface/fonts/webfonts/G8321-ExtraBold.woff2') format('woff2'),
         url('/fonts/G8321-Typeface/fonts/webfonts/G8321-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'G8321';
    src: url('/fonts/G8321-Typeface/fonts/webfonts/G8321-Black.woff2') format('woff2'),
         url('/fonts/G8321-Typeface/fonts/webfonts/G8321-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --palette-1: #354093;
    --palette-2: #f8e5ee;
    --palette-3: #f2f8ef;
    --palette-4: #fbefc6;
    --palette-5: #f6ede8;

    /* NEW COLOR PALETTE - Based on provided design */
    --base: #C9C5C5; /* Base - Light gray for main backgrounds */
    --base-two: #8B3A3A; /* Base / Two - Dark red/brown for primary elements */
    --contrast: #3E3E3E; /* Contrast - Dark gray for text and dark elements */
    --contrast-two: #D4A853; /* Contrast / Two - Golden yellow for secondary highlights */
    --contrast-three: #C496C4; /* Contrast / Three - Light purple for tertiary accents */
    --accent: #F5F2E8; /* Accent - Cream for light accents */
    --accent-two: #E8DFD1; /* Accent / Two - Beige for subtle backgrounds */
    --accent-three: #D69E4E; /* Accent / Three - Orange for vibrant highlights */
    --accent-four: #9FB09A; /* Accent / Four - Sage green for natural accents */
    --accent-five: #A8A8A8; /* Accent / Five - Gray for neutral elements */
    --deep-purple: #1f045d; /* Deep Purple - Rich dark purple for emphasis and depth */
    /* SEMANTIC COLOR ASSIGNMENTS */
    --primary-color: var(--base-two); /* Dark red/brown for primary actions */
    --secondary-color: var(--contrast-two); /* Golden yellow for secondary elements */
    --accent-color: var(--accent-three); /* Orange for highlights */
    --dark-color: var(--contrast); /* Dark gray for text */
    --light-color: var(--accent); /* Cream for light backgrounds */
    --warm-white: var(--accent-two); /* Beige for body background */
    --text-color: var(--contrast); /* Dark gray for main text */
    /* MENU COLOR PALETTE - Updated to use new palette */
    --menu-bg: var(--base); /* Light gray menu background */
    --menu-accent1: var(--contrast-two); /* Golden yellow */
    --menu-accent2: var(--contrast-three); /* Light purple */
    --menu-accent3: var(--accent-four); /* Sage green */
    --menu-active: var(--base-two); /* Dark red/brown for active states */
    --menu-text: var(--contrast); /* Dark gray text */
    --menu-text-inverse: var(--accent); /* Cream text on dark backgrounds */
    /* LEGACY COMPATIBILITY */
    --menu-border: var(--contrast-two);
    --menu-hover: var(--accent-two);
    --menu-gradient: linear-gradient(135deg, var(--accent-three) 0%, var(--base-two) 40%, var(--accent-four) 80%, var(--contrast-three) 100%);
    --menu-bg-solid: var(--accent);
    --menu-link-color: var(--contrast);
    --menu-link-hover-bg: var(--accent-four);
    --menu-link-hover-color: var(--accent);
    --menu-link-active-bg: var(--base-two);
    --menu-link-active-color: var(--accent);
    --menu-shadow: 0 8px 32px 0 rgba(62, 62, 62, 0.18);
    --menu-admin-bg: linear-gradient(90deg, var(--base-two) 0%, var(--accent-three) 100%);
    --menu-admin-hover-bg: linear-gradient(90deg, var(--accent-four) 0%, var(--contrast-three) 100%);
    /* FONT FAMILY */
    --font-family-primary: 'Jua', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-family-gros-ventre: 'Gros Ventre', 'Jua', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-moon: 'Moon', 'Jua', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-mpompa: 'Mpompa', 'Jua', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-sugar-snow: 'Sugar Snow', 'Jua', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-playfulist: 'Playfulist', 'Jua', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-g8321: 'G8321', 'Jua', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* CHARACTER IMAGE DISPLAY */
    --character-image-border-radius: 0;
    --character-image-shadow: 0 4px 12px rgba(62, 62, 62, 0.15);
    --character-image-hover-shadow: 0 8px 24px rgba(62, 62, 62, 0.25);
    --character-image-transition: all 0.3s ease;
}

/* === CUSTOM MENU COLOR PALETTE === */
:root {
    --menu-bg: var(--base); /* Light gray menu background */
    --menu-accent1: var(--contrast-two); /* Golden yellow */
    --menu-accent2: #DD99BB; /* Pink for admin section */
    --menu-accent3: var(--accent-four); /* Sage green */
    --menu-active: var(--base-two); /* Dark red/brown for active states */
    --menu-text: var(--contrast); /* Dark gray text */
    --menu-text-inverse: var(--accent); /* Cream text on dark backgrounds */
}