:root {
  --sn-color-acid: #b6ff00;
  --sn-color-brand: #ff71ce;
  --sn-color-cyber: #0d0d0d;
  --sn-color-light-bg: #f6fff0;
  --sn-color-light-text: #111827;
}

html[data-skin="acid"] {
  --sn-accent: var(--sn-color-acid);
}

html[data-skin="brand"] {
  --sn-accent: var(--sn-color-brand);
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

body[data-theme="dark"] {
  color-scheme: dark;
}

body[data-theme="light"] {
  color-scheme: light;
}

/* Shared utility classes for all surfaces */
.sn-theme-chip {
  border: 1px solid color-mix(in srgb, var(--sn-accent, #b6ff00) 55%, transparent);
  color: var(--sn-accent, #b6ff00);
  background: color-mix(in srgb, var(--sn-accent, #b6ff00) 12%, transparent);
}

.sn-surface-panel {
  border: 1px solid color-mix(in srgb, var(--sn-accent, #b6ff00) 30%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sn-accent, #b6ff00) 8%, transparent);
}