/**
 * Design tokens. Colors and fonts are taken directly from the source
 * template's custom.css :root block (#000000 / #FBF9F6 / #615328 / #BDAD7B,
 * DM Sans + Space Grotesk) — but named semantically (--surface, --text-heading,
 * --accent...) rather than reusing the template's own --primary-color /
 * --secondary-color names verbatim.
 *
 * That's a deliberate departure from a byte-for-byte copy: in the source
 * template, --primary-color does double duty as both "heading/text ink
 * color" AND "dark-section background color," which only works because the
 * template is light-by-default with a few explicit .dark-section overrides.
 * Remapping that single coupled variable per brand would put black heading
 * text on a black Maverick background. Semantic tokens keep the same visual
 * result on Lavish (which uses the template's palette almost verbatim) while
 * letting Maverick invert to fully dark without breaking contrast anywhere.
 */

:root {
  --font-body: "DM Sans", sans-serif;
  --font-heading: "Space Grotesk", sans-serif;
  --white: #FFFFFF;
  --error-color: rgb(230, 87, 87);

  /* Default / Lavish base — matches the template's native light palette */
  --surface: #F4F0E9;
  --surface-alt: #FBF9F6;
  --text-heading: #000000;
  --text-body: #62605D;
  --accent: #BDAD7B;
  --accent-strong: #615328;
  --on-accent: #FFFFFF;
  --divider: #00000014;
  --chrome-bg: #000000;
  --chrome-text: #FFFFFF;
  --chrome-divider: #FFFFFF1A;
}

[data-brand='lavish'] {
  --surface: #FBF6F0;
  --surface-alt: #FFFFFF;
  --text-heading: #2A241D;
  --text-body: #7A6F63;
  --accent: #C9A08A;
  --accent-strong: #B48A4A;
  --on-accent: #FFFFFF;
  --divider: #2A241D14;
  --chrome-bg: #2A241D;
  --chrome-text: #FFFFFF;
  --chrome-divider: #FFFFFF1A;
}

[data-brand='maverick'] {
  --surface: #0C0C0D;
  --surface-alt: #17181A;
  --text-heading: #FFFFFF;
  --text-body: #B7B6B2;
  --accent: #C9A96B;
  --accent-strong: #8A7238;
  --on-accent: #0C0C0D;
  --divider: #FFFFFF1A;
  --chrome-bg: #000000;
  --chrome-text: #FFFFFF;
  --chrome-divider: #FFFFFF1A;
}