:root {
    /* Appetito Dark Palette */
    --primary: #B91C1C;      /* Red */
    --primary-dark: #7F1D1D; /* Dark Red */
    --secondary: #7F1D1D;    /* Dark Red (Secondary) */
    --accent: #CA8A04;       /* Olive Gold */

    /* Text colors - ALWAYS use neutral colors for accessibility */
    --heading: #FAFAF9;      /* Stone 50 (light) for headings */
    --text: #E7E5E4;         /* Stone 200 (light gray) for body */
    --text-muted: #A8A29E;   /* Stone 400 for muted text */

    /* Surfaces */
    --surface: #1C1917;      /* Stone 900 (Dark background) */
    --surface-alt: #292524;  /* Stone 800 (Slightly lighter dark) */
    --surface-dark: #0C0A09; /* Stone 950 (Very dark footer) */

    /* On surfaces */
    --on-surface: #E7E5E4;
    --on-surface-alt: #E7E5E4;
    --on-dark: #FAFAF9;
    --on-primary: #FFFFFF;

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

/* Typography - headings always neutral */
body {
    font-family: var(--font-body, system-ui, sans-serif);
    color: var(--text);
    background: var(--surface);
}

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

.font-heading {
    font-family: var(--font-heading, system-ui, sans-serif);
}

.font-body {
    font-family: var(--font-body, system-ui, sans-serif);
}

/* Tailwind Custom Colors */
.text-primary { color: var(--primary); }
.text-primary-dark { color: var(--primary-dark); }
.text-secondary { color: var(--secondary); }
.text-accent { color: var(--accent); }
.text-heading { color: var(--heading); }
.text-text { color: var(--text); }
.text-muted { color: var(--text-muted); }

.bg-primary { background-color: var(--primary); }
.bg-primary-dark { background-color: var(--primary-dark); }
.bg-secondary { background-color: var(--secondary); }
.bg-accent { background-color: var(--accent); }
.bg-surface { background-color: var(--surface); }
.bg-surface-alt { background-color: var(--surface-alt); }
.bg-surface-dark { background-color: var(--surface-dark); }

.text-on-primary { color: var(--on-primary); }
.text-on-dark { color: var(--on-dark); }

/* Components */
.btn-primary {
    background-color: var(--primary);
    color: var(--on-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    transition: background-color 0.2s;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
}

/* Section specific overrides for dark theme consistency */
.section-dark {
    background-color: var(--surface-dark);
    color: var(--on-dark);
}

.section-dark h1, .section-dark h2, .section-dark h3 {
    color: var(--on-dark);
}

.section-alt {
    background-color: var(--surface-alt);
    color: var(--on-surface-alt);
}

/* Ensure card backgrounds are visible on dark theme */
.card, .box, .bg-white {
    background-color: var(--surface-alt) !important;
    color: var(--text) !important;
}

/* Fix shadows for dark mode */
.shadow, .shadow-md, .shadow-lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}