/* Brand CSS — paths adjusted so it can be loaded from the project root.
   Re-uses colors_and_type.css tokens but loads fonts from brand/fonts/. */

/* Licensed Season Mix + Season Sans variable fonts from Displaay Type Foundry.
   Order DP_order-406571 — supplied 18 May 2026. */
@font-face {
  font-family: "Season Mix";
  src: url("fonts/SeasonMixUprightsVF.woff2") format("woff2-variations"),
       url("fonts/SeasonMixUprightsVF.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Season Mix";
  src: url("fonts/SeasonMixItalicsVF.woff2") format("woff2-variations"),
       url("fonts/SeasonMixItalicsVF.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Season Sans";
  src: url("fonts/SeasonSansUprightsVF.woff2") format("woff2-variations"),
       url("fonts/SeasonSansUprightsVF.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Season Sans";
  src: url("fonts/SeasonSansItalicsVF.woff2") format("woff2-variations"),
       url("fonts/SeasonSansItalicsVF.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --lumio-black:     #000000;
  --lumio-skin:      #EFDBD0;
  --lumio-pale:      #F2F2EC;
  --lumio-stone:     #949692;
  --lumio-yolk:      #EDEB07;
  --lumio-ocher:     #D4AD55;
  --lumio-petal:     #FFA6A6;
  --lumio-lila:      #7C6899;
  --lumio-tangerine: #FF8D40;
  --lumio-earth:     #826340;
  --lumio-olive:     #919468;
  --lumio-mushroom:  #3B3730;
  --lumio-sky:       #3AA5BD;
  --lumio-teal:      #1B5A5E;

  --bg: var(--lumio-pale);
  --fg: var(--lumio-mushroom);
  --fg-muted: var(--lumio-stone);
  --accent: var(--lumio-tangerine);

  --font-display: "Season Mix", ui-serif, Georgia, serif;
  --font-text: "Season Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  --radius-sm: 12px;  --radius-md: 20px;  --radius-lg: 32px;  --radius-xl: 48px;
  --radius-pill: 999px;
  --radius-arch-top: 999px 999px 0 0;

  --rule-color: var(--lumio-mushroom);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}