/* Structural Collective design tokens — dark-neon default (owner decision;
   same brand color scheme recomposed on the purple-black canvas, §6.2 data
   colors untouched). Single source with ./index.js; keep them in sync. */
:root {
  --s-purple:        #A05CFF;  /* neon chrome accent of the brand purple */
  --s-purple-light:  #C08BFF;
  --s-cobalt:        #0F6BFF;  --s-cobalt-tint:  #7FB0FF;
  --s-orchid:        #F55EF5;  --s-orchid-tint:  #FAA9FA;
  --s-green:         #26B55D;  --s-green-tint:   #8BD8A8;
  --s-yellow:        #F0C800;  --s-yellow-tint:  #F7E177;
  --s-gray-100: #F6F1FB; --s-gray-90: #E9E0F2; --s-gray-80: #D3C6E2;
  --s-gray-70:  #B9A9CD; --s-gray-60: #9F8DB5; --s-gray-50: #84719B;
  --s-gray-40:  #ACA1B6; --s-gray-30: #4D3C5F; --s-gray-20: #3A2A4E;
  --s-gray-10:  #2A1740;
  --s-bg:      #140723;
  --s-surface: #1E0E33;
  --s-red-functional: #FF5C5C; /* error/incorrect only; not decorative */
  --font: "Proxima Nova", "Nunito Sans", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  --glow-purple: 0 0 16px rgba(160, 92, 255, 0.35);
  --glow-cobalt: 0 0 14px rgba(15, 107, 255, 0.4);
  --glow-green:  0 0 14px rgba(38, 181, 93, 0.4);
}

body {
  font-family: var(--font);
  color: var(--s-gray-90); /* never pure white */
  background: var(--s-bg);
  margin: 0;
}

::selection {
  background: rgba(160, 92, 255, 0.35);
}

/* Neon niceties that inline styles can't reach */
h1 {
  text-shadow: 0 0 22px rgba(160, 92, 255, 0.35);
}
input, select, textarea {
  color-scheme: dark;
}
input[type="range"] {
  accent-color: var(--s-purple);
}