/*
 * Automatic seasonal palette.
 *
 * Spring: March-May
 * Summer: June-August
 * Autumn: September-October
 * Christmas: November-December
 * Winter: January-February
 *
 * The page structure stays unchanged. Only colour, light and a restrained
 * tone on large atmospheric photographs follow the season.
 */

:root {
  --season-header: #fff;
  --season-soft: #eee8dc;
  --season-hover: #eee8dc;
  --season-field: #fffdf8;
  --season-invite: #efe3cc;
  --season-status: #eee7da;
  --season-photo: none;
}

html[data-season="spring"] {
  --ink: #292b25;
  --dark: #24261f;
  --paper: #f4f3e9;
  --white: #fffdf7;
  --gold: #88733d;
  --gold-light: #ccb67a;
  --line: #d7d5c7;
  --muted: #65665c;
  --season-header: #fffef9;
  --season-soft: #e9ebdf;
  --season-hover: #e7eadc;
  --season-field: #fffef8;
  --season-invite: #e9e2ca;
  --season-status: #e7e9dc;
  --season-photo: saturate(.96) brightness(1.015);
}

html[data-season="summer"] {
  --ink: #2d2921;
  --dark: #262219;
  --paper: #f8f2e4;
  --white: #fffaf0;
  --gold: #9f722e;
  --gold-light: #dfbd74;
  --line: #dfd2b9;
  --muted: #6a6254;
  --season-header: #fffaf1;
  --season-soft: #f0e5cc;
  --season-hover: #eee1c6;
  --season-field: #fffaf0;
  --season-invite: #f2dfb9;
  --season-status: #efe2c9;
  --season-photo: saturate(1.025) brightness(1.015) contrast(1.01);
}

html[data-season="autumn"] {
  --ink: #30271f;
  --dark: #292018;
  --paper: #f3ece2;
  --white: #fff9f1;
  --gold: #966133;
  --gold-light: #d09a61;
  --line: #d6c4b2;
  --muted: #675a4f;
  --season-header: #fff9f1;
  --season-soft: #ead9c8;
  --season-hover: #e6d3c0;
  --season-field: #fffaf4;
  --season-invite: #ecd5b8;
  --season-status: #eadccd;
  --season-photo: saturate(.95) sepia(.055) contrast(1.025) brightness(.985);
}

html[data-season="christmas"] {
  --ink: #2d2421;
  --dark: #1e2923;
  --paper: #f5eee4;
  --white: #fffaf2;
  --gold: #9f753b;
  --gold-light: #d7b678;
  --line: #d5c5b2;
  --muted: #695b52;
  --season-header: #fff9f0;
  --season-soft: #eaded0;
  --season-hover: #e5d5c4;
  --season-field: #fffaf3;
  --season-invite: #ecdbc1;
  --season-status: #eadfd3;
  --season-photo: saturate(.93) sepia(.045) contrast(1.035) brightness(.975);
}

html[data-season="winter"] {
  --ink: #272b29;
  --dark: #202422;
  --paper: #f1f2ef;
  --white: #fafbf7;
  --gold: #806b4b;
  --gold-light: #c4a979;
  --line: #cbd0cc;
  --muted: #5f6461;
  --season-header: #fbfcf9;
  --season-soft: #e3e7e3;
  --season-hover: #dfe4e0;
  --season-field: #fbfcf9;
  --season-invite: #e5dfd2;
  --season-status: #e1e5e1;
  --season-photo: saturate(.86) contrast(1.025) brightness(.98);
}

body {
  transition: background-color .35s ease, color .35s ease;
}

a:focus-visible,
summary:focus-visible {
  outline-color: var(--gold);
}

.site-header,
.gateway-header {
  background: var(--season-header);
}

/* The supplied logo has a white matte. Multiply lets that matte take on the
   exact colour of each light header while preserving the original artwork. */
.site-header .brand-logo,
.gateway-header .brand-logo {
  background: transparent;
  mix-blend-mode: multiply;
}

/* The footer uses the complementary light treatment already defined in the
   photography stylesheet, so its matte disappears into the dark surface. */
.footer .brand-logo {
  background: transparent;
  mix-blend-mode: screen;
}

.mobile-menu nav {
  background: var(--season-header);
}

.gateway-door > img {
  filter: var(--season-photo);
  transition: transform .8s cubic-bezier(.2, .5, .3, 1), filter .35s ease;
}

.hero-photo img,
.craft-image img {
  filter: var(--season-photo);
  transition: filter .35s ease;
}

.crosslink,
.courtyard-section,
.food-information {
  background: var(--season-soft);
}

.product-photo {
  background: var(--season-soft);
}

.store-row:hover {
  background: var(--season-hover);
}

#apprentice-application input,
#apprentice-application select,
#apprentice-application textarea {
  background: var(--season-field);
}

.application-status {
  background: var(--season-status);
  border-left-color: var(--gold);
}

.apprentice-invite {
  background: var(--season-invite);
}

/* Christmas is styled as a quiet, classic evening room: forest green,
   restrained burgundy, champagne gold and warm pools of light. */
html[data-season="christmas"] body.gateway-page,
html[data-season="christmas"] .gateway-footer,
html[data-season="christmas"] .bakery-hero,
html[data-season="christmas"] .menu-callout,
html[data-season="christmas"] .craft-section,
html[data-season="christmas"] .party-facts,
html[data-season="christmas"] .footer {
  background-color: #1e2923;
  background-image:
    radial-gradient(circle at 78% 8%, rgba(215, 182, 120, .14), transparent 31%),
    linear-gradient(135deg, #18251f 0%, #211e1a 60%, #3a181d 100%);
}

html[data-season="christmas"] .site-header,
html[data-season="christmas"] .gateway-header {
  box-shadow: inset 0 -1px rgba(159, 117, 59, .38);
}

html[data-season="christmas"] .door-shade {
  background:
    radial-gradient(circle at 70% 18%, rgba(215, 182, 120, .12), transparent 34%),
    linear-gradient(180deg, rgba(24, 17, 13, .04) 12%, rgba(30, 24, 18, .34) 48%, rgba(22, 18, 15, .92) 100%);
}

html[data-season="christmas"] .eyebrow {
  letter-spacing: .205em;
}

html[data-season="christmas"] .button:hover,
html[data-season="christmas"] .nav-cta:hover {
  background: #4a2025;
  border-color: #4a2025;
}

@media (prefers-reduced-motion: reduce) {
  body,
  .gateway-door > img,
  .hero-photo img,
  .craft-image img {
    transition: none;
  }
}