/* Alternative palettes, selected by <html data-palette="..."> (set in layout.ts).
   Without the attribute the page uses "Sunset Pop" from telroo.css :root. */

/* "Japanese retro": green #569757, ochre #eb9c48, vermilion #d43508 on warm charcoal and washi cream.
   Text pairs (WCAG AA ≥ 4.5:1): ink on ochre 6.98, ink on cream 13.8, white on ink 15.6,
   link green #3b6e3d on cream 5.31, white on #3b6e3d 6.03, vermilion text #b8300a on cream 5.4,
   white on #b8300a 6.1, ochre on ink 6.98, ink on lime --pick #c9f26b 13.4. The pure brand green #569757 and vermilion #d43508
   are used only as fills and gradients (not small text). */
:root[data-palette="retro"] {
  --ocean: #262320;
  --ocean-rgb: 38 35 32;
  --ocean-soft: #5c554b;
  --coral: #eb9c48;
  --coral-rgb: 235 156 72;
  --coral-dark: #b8300a;
  --eucalyptus: #3b6e3d;
  --eucalyptus-rgb: 59 110 61;
  --sun: #e9b85f;
  --flame: #569757;
  --seafoam: #e4eedd;
  --seafoam-soft: #eef3e8;
  --sand: #f6f0e4;
  --sand-rgb: 246 240 228;
  --paper: #fffdf8;
  --pick: #c9f26b;
  --pick-ink: #262320;
}
/* Ochre is too light for text on cream, so light-background accents use vermilion. */
:root[data-palette="retro"] .site-logo strong,
:root[data-palette="retro"] .tile > span { color: var(--coral-dark); }
:root[data-palette="retro"] .section--ocean .tile > span { color: var(--coral); }
/* Show the full three-colour band (vermilion → ochre → green) in the marquee and phone frame. */
:root[data-palette="retro"] .marquee { background: linear-gradient(90deg, #d43508, var(--coral) 50%, #569757); }
:root[data-palette="retro"] .phone { background: linear-gradient(150deg, #569757 0%, var(--coral) 55%, #d43508 100%); }

/* "Lagoon" (2026-10-17, docs/proposals/ui-palette-2026-10.md): aqua, electric blue and sunshine on deep navy and white.
   Text pairs (WCAG AA): navy on aqua 7.97, navy on white 15.4, navy on #f5fbfc 14.7, white on navy 15.4,
   link blue on #f5fbfc 6.17 / on seafoam 5.63, white on link blue 6.46, teal #00756f on #f5fbfc 5.32,
   white on teal 5.56, muted #4a5d78 on seafoam 5.85, navy on sun 10.8, navy on lime --pick 12.0.
   Aqua is only 1.85 on the light background, so light-background accents and focus rings use teal/blue. */
:root[data-palette="lagoon"] {
  --ocean: #0b2545;
  --ocean-rgb: 11 37 69;
  --ocean-soft: #4a5d78;
  --coral: #1fd1b9;
  --coral-rgb: 31 209 185;
  --coral-dark: #00756f;
  --eucalyptus: #1f4fe0;
  --eucalyptus-rgb: 31 79 224;
  --sun: #ffd447;
  --flame: #ff7a59;
  --seafoam: #d6f6f0;
  --seafoam-soft: #ebfbf8;
  --sand: #f5fbfc;
  --sand-rgb: 245 251 252;
  --paper: #ffffff;
  --pick: #c9f26b;
  --pick-ink: #0b2545;
}
:root[data-palette="lagoon"] :focus-visible { outline-color: var(--eucalyptus); }
:root[data-palette="lagoon"] :is(.section--ocean, .page-hero, .site-footer, .callout) :focus-visible { outline-color: var(--coral); }
:root[data-palette="lagoon"] .site-logo strong,
:root[data-palette="lagoon"] .tile > span { color: var(--coral-dark); }
:root[data-palette="lagoon"] .section--ocean .tile > span { color: var(--coral); }
:root[data-palette="lagoon"] .device-checker__error { color: #b42318; }

/* Optional Quiet Lagoon colours, with the original layout and decoration. */
:root[data-palette="quiet"] {
  --ocean: #10262e;
  --ocean-rgb: 16 38 46;
  --ocean-soft: #4b5f68;
  --coral: #ff6b57;
  --coral-rgb: 255 107 87;
  --coral-dark: #bd2f1b;
  --eucalyptus: #bd2f1b;
  --eucalyptus-rgb: 189 47 27;
  --sun: #ffece8;
  --flame: #ff8a6e;
  --seafoam: #efe7d6;
  --seafoam-soft: #f5eee0;
  --sand: #f9f2e2;
  --sand-rgb: 249 242 226;
  --paper: #fffdf8;
  --pick: #ffe5e0;
  --pick-ink: #10262e;
  --accent: #ff6b57;
  --accent-dark: #bd2f1b;
  --accent-ink: #10262e;
  --accent-tint: #ffe5e0;
}