/* One Studio Spectrum palette. Neutral web colors approximate native surfaces. */
[data-spectrum] {
  color-scheme: light;
  --ss-pink: #F752C2;
  --ss-purple: #AD63F5;
  --ss-blue: #3882FF;
  --ss-accent-light: #6E38C2;
  --ss-accent-dark: #BD99FF;
  --ss-accent: var(--ss-accent-light);
  --ss-action-fill: #6E38C2;
  --ss-on-action: #FFFFFF;
  --ss-on-gradient: #000000;
  --ss-canvas: #F2F2F7;
  --ss-surface: #FFFFFF;
  --ss-text: #1C1C1E;
  --ss-secondary: #63636B;
  --ss-border: #D1D1D6;
  --ss-gradient: linear-gradient(135deg, var(--ss-pink), var(--ss-purple), var(--ss-blue));
  --ss-wash: color-mix(in srgb, var(--ss-accent) 10%, transparent);
  color: var(--ss-text);
  background-color: var(--ss-canvas);
}
@media (prefers-color-scheme: dark) {
  [data-spectrum]:not([data-appearance="light"]) {
    color-scheme: dark;
    --ss-canvas: #000000; --ss-surface: #131118;
    --ss-text: #FFFFFF; --ss-secondary: #AEAEB8; --ss-border: #38383A;
    --ss-accent: var(--ss-accent-dark);
  }
}
[data-spectrum][data-appearance="dark"] {
  color-scheme: dark;
  --ss-canvas: #000000; --ss-surface: #131118;
  --ss-text: #FFFFFF; --ss-secondary: #AEAEB8; --ss-border: #38383A;
  --ss-accent: var(--ss-accent-dark);
}
[data-spectrum] .ss-surface { background: var(--ss-surface); color: var(--ss-text); }
[data-spectrum] .ss-action { background: var(--ss-action-fill); color: var(--ss-on-action); }
[data-spectrum] .ss-gradient-action { background: var(--ss-gradient); color: var(--ss-on-gradient); }
[data-spectrum] .ss-secondary { color: var(--ss-secondary); }
[data-spectrum] .ss-link { color: var(--ss-accent); }