/* LocalLiveAid's palette lives in style/light.css / style/dark.css now, under
   the framework's own --color-* names (--color-primary-dark is navy,
   --color-secondary is orange, etc.) — see the comments there for the full
   mapping. That's the actual point of the framework's theme-file split: swap
   light.css/dark.css and every component re-skins, with nothing here or in
   any component needing to change. Only two tokens don't have a clean home
   in that scheme, so they stay here instead of being forced into one:
   --cream-dark (a secondary page-background shade the palette has no slot
   for) and --max (a layout width, not a color, so it isn't theme-dependent
   at all). */
:root {
    --cream-dark: #EDE1C9;
    --max: 1180px;
}

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 100dvh;
    background-color: var(--color-page-bg);
    font-family: var(--font-body);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}

/* Only h1-h4 — matches the source design, which leaves h5/h6 at browser
   defaults (see footer column headings) rather than resetting every level. */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
    margin: 0;
    line-height: 1.15;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }

a {
    color: inherit;
    text-decoration: none;
}

/* ── Layout ───────────────────────────────────────────────── */
.page {
    display: block;
    max-width: 100dvw;
    background-color: var(--color-page-bg);
}

/* ── Icons ────────────────────────────────────────────────── */
/* Each icon is a standalone file in assets/icons/. The file is used as an
   alpha mask rather than drawn directly, so its own colour is irrelevant and
   the icon takes the element's `color` instead — meaning one file serves every
   colour it's needed in. Size with width/height, colour with `color` (set on
   the icon or inherited from any ancestor). */
.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.icon-bubbles    { --icon: url("/assets/icons/bubbles.svg"); }
.icon-checkmark  { --icon: url("/assets/icons/checkmark.svg"); }
.icon-heart      { --icon: url("/assets/icons/heart.svg"); }
.icon-music-note { --icon: url("/assets/icons/music-note.svg"); }
.icon-network    { --icon: url("/assets/icons/network.svg"); }
.icon-people     { --icon: url("/assets/icons/people.svg"); }
.icon-pin        { --icon: url("/assets/icons/pin.svg"); }
.icon-wine       { --icon: url("/assets/icons/wine.svg"); }
.icon-star       { --icon: url("/assets/icons/star.svg"); }
.icon-tent       { --icon: url("/assets/icons/tent.svg"); }
.icon-house      { --icon: url("/assets/icons/house.svg"); }
.icon-car        { --icon: url("/assets/icons/car.svg"); }
.icon-coin       { --icon: url("/assets/icons/coin.svg"); }
.icon-calendar   { --icon: url("/assets/icons/calendar.svg"); }
.icon-flame      { --icon: url("/assets/icons/flame.svg"); }
.icon-handshake  { --icon: url("/assets/icons/handshake.svg"); }
.icon-truck      { --icon: url("/assets/icons/truck.svg"); }
.icon-gift       { --icon: url("/assets/icons/gift.svg"); }
.icon-external   { --icon: url("/assets/icons/external-link.svg"); }
.icon-facebook   { --icon: url("/assets/socials/facebook.svg"); }

/* ── Animations ───────────────────────────────────────────── */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}