/* Colour palettes. The live site uses Blaze (data-palette="blaze" on <html>); the old comparison page is in WEBSITE/tools/old-previews.
   Each palette only swaps the colour tokens from styles.css; set data-palette="alpine" (etc.) on <html>.
   The R mark is a separate image: brand/mark-orange.png goes with Blaze (blue mark.png and mark-red.png also exist). */

/* Alpine: night-sky navy and snow, from the blue skies and peaks of retro ski posters */
html[data-palette="alpine"] {
  --graphite: #111b2d; --graphite-2: #1a2640;
  --stone: #dde2e5; --paper: #f1f3f2;
  --ink: #111b2d; --mute: #5a6577; --mute-dark: #a5b0c2;
  --ice: #c3e2fc; --cobalt: #3d8de0;
  --line: rgba(17, 27, 45, .14); --line-dark: rgba(241, 243, 242, .16);
}

/* Trail: deep forest green with sand and an ochre accent, like an old hiking-map cover */
html[data-palette="trail"] {
  --graphite: #1b251f; --graphite-2: #253129;
  --stone: #dcd5c4; --paper: #efebe1;
  --ink: #1b251f; --mute: #64695d; --mute-dark: #a8ae9f;
  --ice: #e6c46a; --cobalt: #c08f1f;
  --line: rgba(27, 37, 31, .15); --line-dark: rgba(239, 235, 225, .16);
}

/* Blaze: near-black and bone with the red-orange of the R mark */
html[data-palette="blaze"] {
  --graphite: #171615; --graphite-2: #23211f;
  --stone: #e3dfd7; --paper: #f4f2ed;
  --ink: #171615; --mute: #6b6965; --mute-dark: #aba8a2;
  --ice: #ff6c43; --cobalt: #f2522a;   /* matched to the red-orange R mark */
  --line: rgba(23, 22, 21, .14); --line-dark: rgba(244, 242, 237, .16);
}

/* Glacier: the dark sections turn cobalt, taken from the edge of the R mark, over pale ice */
html[data-palette="glacier"] {
  --graphite: #1c3a7e; --graphite-2: #244690;
  --stone: #d8e4f0; --paper: #eef3f8;
  --ink: #0f1c3a; --mute: #4e5f80; --mute-dark: #b6c6e6;
  --ice: #ffffff; --cobalt: #8cc4ff;
  --line: rgba(15, 28, 58, .14); --line-dark: rgba(238, 243, 248, .2);
}

/* A few surfaces in styles.css use the graphite colour directly; follow the palette instead */
html[data-palette] .viewer__bar { background: color-mix(in srgb, var(--graphite) 92%, transparent); }
html[data-palette] .viewer__grid button { background: var(--graphite-2); }
html[data-palette] .reel__toggle { background: color-mix(in srgb, var(--graphite) 60%, transparent); }
html[data-palette] .card__media { background: color-mix(in srgb, var(--stone) 85%, var(--ink)); }
html[data-palette] .about__photo-empty { background: color-mix(in srgb, var(--ink) 3%, transparent); }
html[data-palette] .cads--empty { background: color-mix(in srgb, var(--graphite) 35%, transparent); }
html[data-palette] .viewer__intro.has-backdrop::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--graphite) 45%, transparent) 0%,
    color-mix(in srgb, var(--graphite) 66%, transparent) 45%, color-mix(in srgb, var(--graphite) 93%, transparent) 100%);
}