/*
 * Base CSS Template for Palettes
 * Copy this and replace CSS variables with palette values
 *
 * IMPORTANT: Always use --heading for h1-h6, never --text
 */

:root {
    /* Pastel Dream Palette */
    --primary: #F9A8D4;      /* pink-300 */
    --primary-dark: #F472B6; /* pink-400 */
    --secondary: #C4B5FD;    /* violet-300 */
    --accent: #6EE7B7;       /* emerald-300 */

    --surface: #FFFFFF;
    --surface-alt: #FFFBFE;  /* rose white */
    --surface-dark: #581C87; /* purple-900 */

    --heading: #111827;      /* near-black (neutral) */
    --text: #581C87;         /* purple-900 (body text) */
    --text-muted: #6B7280;   /* gray-500 */

    --on-primary: #581C87;   /* dark text on light pink */
    --on-dark: #FFFBFE;      /* light text on dark purple */

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
}

/* Base styles using variables */
body {
    font-family: var(--font-body);
    color: var(--text);
    background-color: var(--surface-alt);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--heading);
}

/* Custom Utilities mapping to variables */
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.text-accent { color: var(--accent) !important; }
.bg-accent { background-color: var(--accent) !important; }
.bg-surface-alt { background-color: var(--surface-alt) !important; }
.bg-surface-dark { background-color: var(--surface-dark) !important; }
.text-on-dark { color: var(--on-dark) !important; }

/* Button Styles */
.btn-primary {
    background-color: var(--primary);
    color: var(--on-primary);
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: var(--primary-dark);
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Mobile Menu Transition */
[x-cloak] { display: none !important; }

/* Font Loading Fixes */
.font-heading { font-family: 'Playfair Display', serif; }
.font-body { font-family: 'Lato', sans-serif; }