/* ===========================================================================
   TEMPORARY PALETTE SWITCHER — remove after the team picks a color scheme.
   Self-contained: palette overrides + floating widget styles.
   To remove the whole feature, delete this file, delete
   templates/layout/v2/palette-switcher.html, and remove the three
   `TEMP palette switcher`-commented lines in templates/layout/base.html.

   Each palette overrides only the foundation brand tokens; the semantic
   aliases in tokens.css reference them via var(), so buttons, links, focus
   rings, card hovers and callouts all recolor automatically (light + dark).
   `:root[data-color-scheme=...]` (0,2,0) outranks base `:root` (0,1,0).
   =========================================================================== */

/* Current Cyan — matches the tokens.css default; an explicit block lets the
   switcher reset to it and keeps all four palettes visually parallel. */
:root[data-color-scheme="cyan"] {
  --color-brand-accent:       #0E7490;
  --color-brand-accent-hover: #155E75;
  --color-brand-shimmer:      #67E8F9;
  --color-brand-ink:          #0E7490;
  --color-brand-glow:         #22D3EE;
  --accent-soft:              #CFFAFE;
  --accent-tint:              #ECFEFF;
}

/* Royal Blue — built from the legacy brand blue #005B99. */
:root[data-color-scheme="royal"] {
  --color-brand-accent:       #005B99;
  --color-brand-accent-hover: #00497A;
  --color-brand-shimmer:      #6FB6E6;
  --color-brand-ink:          #005B99;
  --color-brand-glow:         #4DA8E6;
  --accent-soft:              #DCECF7;
  --accent-tint:              #EEF6FC;
}

/* Emerald Green. Accent + ink darkened to #0B7E55 (5.09:1 white-on-accent)
   for AA on buttons and links. */
:root[data-color-scheme="emerald"] {
  --color-brand-accent:       #0B7E55;
  --color-brand-accent-hover: #096542;
  --color-brand-shimmer:      #6EE7B7;
  --color-brand-ink:          #0B7E55;
  --color-brand-glow:         #34D399;
  --accent-soft:              #D6F5E6;
  --accent-tint:              #ECFBF3;
}

/* Original Teal — the main-branch turquoise scheme (brand blue #005B99 /
   bright #19C2C2). Accent darkened from #01A4A4 to #057E7E (4.89:1) and ink
   to #066C6C so white button text and links pass AA on white. */
:root[data-color-scheme="teal"] {
  --color-brand-accent:       #057E7E;
  --color-brand-accent-hover: #046464;
  --color-brand-shimmer:      #8ADFDF;
  --color-brand-ink:          #066C6C;
  --color-brand-glow:         #19C2C2;
  --accent-soft:              #CFF5F5;
  --accent-tint:              #E6FAFA;
}


/* ---------------------------------------------------------------------------
   Exploratory options — directions outside the current cool blue-green family.
   All tuned to WCAG AA: white-on-accent >=4.5:1, ink on white >=4.5:1,
   glow on the dark #1A2332 surface >=4.5:1.
   --------------------------------------------------------------------------- */

/* Indigo — modern, trustworthy, tech-forward. accent 7.9:1. */
:root[data-color-scheme="indigo"] {
  --color-brand-accent:       #4338CA;
  --color-brand-accent-hover: #3730A3;
  --color-brand-shimmer:      #C7D2FE;
  --color-brand-ink:          #4338CA;
  --color-brand-glow:         #818CF8;
  --accent-soft:              #E0E7FF;
  --accent-tint:              #EEF2FF;
}

/* Amber / Bronze — warm, energetic. accent 5.02:1. */
:root[data-color-scheme="amber"] {
  --color-brand-accent:       #B45309;
  --color-brand-accent-hover: #92400E;
  --color-brand-shimmer:      #FDE68A;
  --color-brand-ink:          #B45309;
  --color-brand-glow:         #FBBF24;
  --accent-soft:              #FEF3C7;
  --accent-tint:              #FFFBEB;
}

/* Plum / Violet — rich, premium, distinctive. accent 8.72:1. */
:root[data-color-scheme="plum"] {
  --color-brand-accent:       #6B21A8;
  --color-brand-accent-hover: #581C87;
  --color-brand-shimmer:      #E9D5FF;
  --color-brand-ink:          #6B21A8;
  --color-brand-glow:         #C084FC;
  --accent-soft:              #F3E8FF;
  --accent-tint:              #FAF5FF;
}

/* Crimson / Garnet — bold. accent 6.29:1. NOTE: near the site's error red
   (#D14B3A); a red primary action can blur submit vs. destructive semantics. */
:root[data-color-scheme="crimson"] {
  --color-brand-accent:       #BE123C;
  --color-brand-accent-hover: #9F1239;
  --color-brand-shimmer:      #FDA4AF;
  --color-brand-ink:          #BE123C;
  --color-brand-glow:         #FB7185;
  --accent-soft:              #FFE4E6;
  --accent-tint:              #FFF1F2;
}


/* ---------------------------------------------------------------------------
   Floating widget
   --------------------------------------------------------------------------- */
.palette-switcher {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sharp);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}

.palette-switcher__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.palette-switcher__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.palette-switcher__collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-full);
}
.palette-switcher__collapse:hover {
  background: var(--surface-sunken);
  color: var(--text-primary);
}

.palette-switcher__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 156px;  /* 4 swatches per row */
}

.palette-switcher__swatch {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  background: var(--ps-color);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-std);
}
.palette-switcher__swatch:hover {
  transform: scale(1.12);
}
.palette-switcher__swatch[aria-pressed="true"] {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--text-primary);
}
.palette-switcher__swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--color-brand-accent);
}

/* Collapsed: hide everything but a single launcher dot */
.palette-switcher[data-open="false"] {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.palette-switcher[data-open="false"] .palette-switcher__body { display: none; }

.palette-switcher__launcher {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  color: var(--color-brand-accent);
  cursor: pointer;
}
.palette-switcher[data-open="false"] .palette-switcher__launcher { display: inline-flex; }