variables.css

:root {
  /** colors */
  --color-name: custom;
  --color-bg-shade: #3A454E;
  --color-bg-base: #495662;
  --color-bg-surface: #586776;
  --color-bg-highlight: #667889;
  --color-fg-shade: #7ED8F1;
  --color-fg-base: #D1F1FA;
  --color-fg-surface: #FFFFFF;
  --color-fg-highlight: #FFFFFF;
  --color-primary-bg: #31455B;
  --color-primary-base: #698BAE;
  --color-primary-fg: #C4D1DF;
  --color-secondary-bg: #623B43;
  --color-secondary-base: #B5848E;
  --color-secondary-fg: #F0E6E8;
  --color-palette-red: #E06C75;
  --color-palette-green: #98C379;
  --color-palette-yellow: #E5C07B;
  --color-palette-blue: #61AFEF;
  --color-palette-purple: #C678DD;
  --color-palette-cyan: #56B6C2;
  --color-palette-orange: #FFBB7C;
  
  /** general */
  --font-family: CaskaydiaCove Nerd Font Mono;
  --font-size: 1;
  --display-image: block;

  /** surface */
  --surface-maxWidth: 900px;
  --surface-shadow: 0px 0px 32px #31455B;
  --surface-borderRadius: 32px;

  /** spacing */
  --space-smallest: 0.125rem;
  --space-small: 0.5rem;
  --space-medium: 1rem;
  --space-large: 1.5rem;
  --space-largest: 3rem;

  /** others */
  --picture-size: 300px;
  --group-count: 3;
}