/* Accent tokens are shared by the homepage, contact, legal and admin views. */
:root {
  --brand-primary: #FD5C01;
  --brand-primary-rgb: 253,92,1;
  --brand-highlight: #ff7a2a;
  --brand-gold: #ff8c00;
  --brand-gold-rgb: 255,140,0;
  --brand-deep: #e14800;
  --brand-deep-rgb: 225,72,0;
  --brand-legal: #f36d00;
  --brand-legal-rgb: 243,109,0;
  --brand-orange: #ff650f;
  --brand-orange-rgb: 255,101,15;
  --brand-glow: #ff792b;
  --brand-glow-rgb: 255,121,43;
  --brand-link: #ff8a2a;
}
:root[data-brand-mode="cool"] {
  color-scheme: dark;
  --brand-primary: #2bb8ff;
  --brand-primary-rgb: 43,184,255;
  --brand-highlight: #64d3ff;
  --brand-gold: #39c6ff;
  --brand-gold-rgb: 57,198,255;
  --brand-deep: #08649d;
  --brand-deep-rgb: 8,100,157;
  --brand-legal: #2bb8ff;
  --brand-legal-rgb: 43,184,255;
  --brand-orange: #2bb8ff;
  --brand-orange-rgb: 43,184,255;
  --brand-glow: #64d3ff;
  --brand-glow-rgb: 100,211,255;
  --brand-link: #74d7ff;
}
/* Recolor artwork/particle layers only, never content, logos or error states. */
html[data-brand-mode="cool"] body::before {
  filter: grayscale(1) sepia(1) hue-rotate(165deg) saturate(4);
}
html[data-brand-mode="cool"] #fieldCanvas,
html[data-brand-mode="cool"] #particles { filter: hue-rotate(180deg); }
html[data-brand-mode="cool"] .btn:not(.btn-ghost),
html[data-brand-mode="cool"] .btn-save,
html[data-brand-mode="cool"] #ck-hidden-modal .hm-save {
  background: linear-gradient(180deg, #0875b8, #064c7a);
  color: #fff;
}
.brand-mode-toggle {
  flex-shrink: 0; cursor: pointer; color: #fff;
  font-family: 'Orbitron', 'Rajdhani', sans-serif; font-weight: 800; font-size: 13px; line-height: 1.55;
}
.brand-mode-toggle:focus-visible { outline: 3px solid var(--brand-highlight); outline-offset: 3px; }
.topbar-inner { flex-wrap: wrap; }
.official-wordmark .brand-attribution, .brand-relationship { display: none; }
html[data-brand-mode="cool"] .wordmark-second-line {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 2.4vw, 30px);
}
html[data-brand-mode="cool"] .official-wordmark .brand-attribution {
  display: block;
  margin-top: 0;
  color: #ff792b;
  font: 600 clamp(9px, 1vw, 13px)/1.4 'Rajdhani', sans-serif;
  white-space: nowrap;
  letter-spacing: .02em;
}
html[data-brand-mode="cool"] .brand-relationship {
  display: block;
  max-width: 760px;
  margin: 18px auto 0;
  padding: 0 24px 16px;
  color: #b6c8d2;
  font: 400 13px/1.6 'Inter', sans-serif;
  text-align: center;
}
#signin-screen .brand-mode-toggle { margin: 20px auto 0; }
@media (max-width: 520px) {
  .topbar-inner > .brand { flex: 1; }
  .topbar-inner > .brand-mode-toggle { order: 4; width: 100%; min-height: 36px; }
}

body > canvas.brand-grains { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 10001; pointer-events: none; }

/* Destination colors stay distinct from the currently selected theme. */
html .brand-mode-toggle.btn[aria-pressed="false"] {
  background: linear-gradient(180deg, #0875b8, #064c7a);
  box-shadow: 0 18px 40px #0875b82e; color: #fff;
}
html[data-brand-mode="cool"] .brand-mode-toggle.btn[aria-pressed="true"] {
  background: linear-gradient(180deg, #fd5c01, #e14800);
  box-shadow: 0 18px 40px #fd5c012e; color: #fff;
}
body > button.sand-demo-control {
  position: fixed; right: 20px; bottom: 20px; z-index: 10002;
  border: 1px solid #8293a4; border-radius: 12px; padding: 12px 18px;
  background: #07111f; color: white; font: 600 14px/1.4 sans-serif; cursor: pointer;
}