:root,
:root[data-theme="light"] {
  --nockset-canvas: #F5F7F4;
  --nockset-surface: #FFFFFF;
  --nockset-surface-raised: #FFFFFF;
  --nockset-surface-muted: #EDF1ED;
  --nockset-border: #D6DED7;
  --nockset-border-strong: #89968E;
  --nockset-text: #161A17;
  --nockset-text-secondary: #4E5A53;
  --nockset-text-muted: #6A766F;
  --nockset-brand: #4E6E0D;
  --nockset-brand-fill: #C3F05A;
  --nockset-on-brand: #161A17;
  --nockset-focus: #4E6E0D;
  --nockset-route-local: #4E6E0D;
  --nockset-route-direct: #08715F;
  --nockset-route-relay: #3A5FB0;
  --nockset-state-warning: #745900;
  --nockset-state-danger: #B1322C;
}

:root[data-theme="dark"] {
  --nockset-canvas: #111411;
  --nockset-surface: #191D1A;
  --nockset-surface-raised: #202521;
  --nockset-surface-muted: #202521;
  --nockset-border: #323A34;
  --nockset-border-strong: #68736B;
  --nockset-text: #F4F7F1;
  --nockset-text-secondary: #B0BAB3;
  --nockset-text-muted: #87928B;
  --nockset-brand: #C3F05A;
  --nockset-brand-fill: #C3F05A;
  --nockset-on-brand: #161A17;
  --nockset-focus: #C3F05A;
  --nockset-route-local: #C3F05A;
  --nockset-route-direct: #3FC7AE;
  --nockset-route-relay: #78A6FF;
  --nockset-state-warning: #E5B94E;
  --nockset-state-danger: #FF7167;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nockset-canvas: #111411;
    --nockset-surface: #191D1A;
    --nockset-surface-raised: #202521;
    --nockset-surface-muted: #202521;
    --nockset-border: #323A34;
    --nockset-border-strong: #68736B;
    --nockset-text: #F4F7F1;
    --nockset-text-secondary: #B0BAB3;
    --nockset-text-muted: #87928B;
    --nockset-brand: #C3F05A;
    --nockset-brand-fill: #C3F05A;
    --nockset-on-brand: #161A17;
    --nockset-focus: #C3F05A;
    --nockset-route-local: #C3F05A;
    --nockset-route-direct: #3FC7AE;
    --nockset-route-relay: #78A6FF;
    --nockset-state-warning: #E5B94E;
    --nockset-state-danger: #FF7167;
  }
}