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

/* CSS Variables */
:root {
    /* New Color Palette Inspired by Example */
    --accent-yellow: #facc15; /* Tailwind yellow-300 */
    --accent-yellow-dark: #eab308; /* Darker yellow for hover */
    --bg-gradient-start: #2c1c10;
    --bg-gradient-end: #422614;
    --text-on-dark: #ffffff;
    --text-on-light: #1f2937; /* Dark text for white backgrounds (Tailwind gray-800) */
    --card-bg: #ffffff;
    --banner-bg: #fef3c7; /* Tailwind yellow-100 */
    --transparent-dark-bg: rgba(0, 0, 0, 0.3); /* For header/footer */
    --border-color-subtle: rgba(255, 255, 255, 0.1); /* Subtle border on dark bg */
    --border-color-light: #e5e7eb; /* Light border for white elements */

    /* Existing Variables (Keep or repurpose if needed) */
    --primary-color: var(--accent-yellow); /* Reassign primary to yellow */
    --primary-color-dark: var(--accent-yellow-dark);
    --secondary-color: #6b7280; /* Muted Gray (Tailwind gray-500) */
    --text-light: var(--text-on-dark);
    --text-dark: var(--text-on-light);
    --text-muted: #9ca3af; /* Medium gray (Tailwind gray-400) */
    --white: #ffffff;
    --error-color: #ef4444; /* Tailwind red-500 */
    --success-color: #22c55e; /* Tailwind green-500 */
    --info-color: #3b82f6;   /* Tailwind blue-500 */
    --border-color: var(--border-color-subtle); /* Default border subtle */
    --shadow-color: rgba(0, 0, 0, 0.1); /* Reduced shadow */
    --shadow-light: rgba(0, 0, 0, 0.05);

    /* Font */
    --font-main: 'Poppins', sans-serif;

    /* Layout */
    --header-height: 65px; /* Adjust as needed */
}