/* Musou brand foundation. Source: Figma 2002:44, dedicated palette swatches.
 * Temporary font stacks: replace centrally after licensed Nourd/Garet webfonts arrive.
 * Outfit webfonts are registered centrally in theme.json (SIL OFL 1.1).
 */
:root {
  --musou-color-white: #ffffff;
  --musou-color-cream: #eae3db;
  --musou-color-taupe: #aa9a8d;
  --musou-color-charcoal: #2d2927;
  --musou-color-black: #000000;

  --musou-font-heading: var(--musou-font-body);
  --musou-font-body: "Outfit", "Avenir Next", sans-serif;

  --musou-color-background: var(--musou-color-cream);
  --musou-color-surface: var(--musou-color-white);
  --musou-color-text: var(--musou-color-charcoal);
  --musou-color-text-inverse: var(--musou-color-white);
  --musou-color-accent: var(--musou-color-taupe);
}

/* Theme roles keep the original palette intact. Dark is the initial presentation. */
:root {
  color-scheme: dark;
  --musou-page: var(--musou-color-black);
  --musou-soft: #222222;
  --musou-paper: #161616;
  --musou-ui-ink: var(--musou-color-cream);
  --musou-footer-surface: var(--musou-color-cream);
  --musou-footer-ink: var(--musou-color-black);
  --musou-panel: #161616;
  --musou-ink: var(--musou-color-cream);
  --musou-muted: #bcbcbc;
  --musou-backdrop: #000000;
  --musou-border: rgb(234 227 219 / .3);
}
:root[data-theme="light"] {
  color-scheme: light;
  --musou-page: var(--musou-color-white);
  --musou-soft: #f3f1ed;
  --musou-paper: #faf9f6;
  --musou-ui-ink: var(--musou-color-black);
  --musou-footer-surface: var(--musou-color-black);
  --musou-footer-ink: var(--musou-color-cream);
  --musou-panel: var(--musou-color-white);
  --musou-ink: var(--musou-color-black);
  --musou-muted: #595959;
  --musou-backdrop: var(--musou-color-white);
  --musou-border: rgb(45 41 39 / .25);
}

/* Animate the shared colours, including the greeting gradient, as one palette. */
@property --musou-page { syntax: "<color>"; inherits: true; initial-value: #000000; }
@property --musou-panel { syntax: "<color>"; inherits: true; initial-value: #161616; }
@property --musou-ink { syntax: "<color>"; inherits: true; initial-value: #eae3db; }
@property --musou-muted { syntax: "<color>"; inherits: true; initial-value: #bcbcbc; }
@property --musou-backdrop { syntax: "<color>"; inherits: true; initial-value: #000000; }
@property --musou-border { syntax: "<color>"; inherits: true; initial-value: rgb(234 227 219 / .3); }
:root.theme-motion {
  transition: --musou-page .48s cubic-bezier(.4,0,.2,1),
              --musou-panel .48s cubic-bezier(.4,0,.2,1),
              --musou-ink .48s cubic-bezier(.4,0,.2,1),
              --musou-muted .48s cubic-bezier(.4,0,.2,1),
              --musou-backdrop .48s cubic-bezier(.4,0,.2,1),
              --musou-border .48s cubic-bezier(.4,0,.2,1);
}
/* Older browsers still ease the basic surfaces and text. */
.theme-motion:not(.has-color-properties) body,
.theme-motion:not(.has-color-properties) .menu-panel,
.theme-motion:not(.has-color-properties) .site-footer {
  transition: background-color .48s ease, color .48s ease;
}
@media (prefers-reduced-motion: reduce) {
  :root.theme-motion { transition: none; }
}