/**
 * Polder to Playa — Brand CSS
 *
 * Overrides color variables to match new logo palette.
 * Include AFTER inline <style> blocks in all pages so these take precedence.
 *
 * Palette:
 *   Navy  #1D3557  — dark navy from left square (Netherlands / structure)
 *   Orange #C85A17 — warm terracotta from right waves (Spain / warmth)
 *   Beige  #FDF8F2 — sandy backgrounds
 *   Grey   #CFDCE8 — cool borders / subtle elements
 */

:root {
    --ink:          #1D3557;   /* dark navy — primary text & headings */
    --warm:         #FDF8F2;   /* sandy beige — page backgrounds */
    --accent:       #C85A17;   /* terracotta orange — CTAs & accent */
    --accent-light: #E07540;   /* lighter orange — hover states */
    --muted:        #5C7A8E;   /* cool blue-grey — secondary text */
    --border:       #CFDCE8;   /* cool grey — borders & dividers */
    --card-bg:      #F7FAFC;   /* off-white — card backgrounds */
    --green:        #2E7D52;   /* updated green for navy harmony */
    --green-bg:     #F0F8F4;   /* updated green background */
}

/* Logo image sizing */
.logo img {
    height: 40px;
    width: auto;
    display: block;
}

/* On mobile, slightly smaller logo */
@media (max-width: 640px) {
    .logo img {
        height: 32px;
    }
}