templates/data-app/themes/default/theme.css

:root {
  color-scheme: light dark;
  --adaptive-theme: 1;
  --font-sans: Georgia, "Times New Roman", serif;
  --background: light-dark(#f7f7f4, #171717);
  --surface: light-dark(#fff, #202020);
  --surface-raised: light-dark(#fff, #242424);
  --muted: light-dark(#f5f5f5, #2b2b2b);
  --control: light-dark(#fff, #292929);
  --control-hover: light-dark(#f6f6f6, #333);
  --interaction-hover: var(--muted);
  --interaction-active: var(--control-hover);
  --text: light-dark(#1c1c1c, #f4f4f4);
  --secondary: light-dark(#787878, #a8a8a8);
  --border: light-dark(#e8e8e8, #383838);
  --border-strong: light-dark(#cfcfcf, #555);
  --accent: #0285ff;
  --positive: light-dark(#167642, #78d69a);
  --negative: light-dark(#c83737, #ff9995);
  --chart-1: #0285ff;
  --chart-2: #924ff7;
  --chart-3: #04b84c;
  --chart-4: #fb6a22;
  --chart-5: #ff66ad;
  --chart-6: #ffc300;
  --chart-7: #fa423e;
  --chart-8: #8f8f8f;
  --movement-positive: color-mix(in srgb, var(--chart-1) 70%, var(--text));
  --movement-negative: color-mix(in srgb, var(--chart-4) 70%, var(--text));
  --chart-neutral-fill: color-mix(in srgb, var(--text) 3%, var(--surface));
  --ranked-list-fill: color-mix(in srgb, var(--text) 18%, var(--surface));
  --ranked-list-fill-hover: color-mix(in srgb, var(--text) 24%, var(--surface));
  --movement-total: var(--secondary);
  --card-radius: 16px;
  --control-radius: 10px;
  --mark-radius: 8;
  --card-shadow: 0 1px 2px light-dark(rgb(20 20 20 / 3%), rgb(0 0 0 / 20%));
  --shadow: 0 8px 28px light-dark(rgb(30 30 30 / 11%), rgb(0 0 0 / 36%));
}