:root 
{
  /* Colors */ 
  --color-primary: rgb(253 179 21);
  --color-primary-hover: rgb(255, 192, 57);
  --color-primary-active: rgb(230, 159, 8);
  --color-secondary: #575757;
  --color-secondary-hover: #525252;
  --color-secondary-active: #363636;
  --color-text: #646464;
  --color-text-special: rgb(255 103 35);
  --color-background: #ddd;
  --color-border: #00000033;
  --color-error-background: #ffaaaa;
  --color-dangerous: #ff2e2e;
  --color-dangerous-hover: #f84343;
  --color-dangerous-active: #d62525;
  --color-text-light: #fff;
  --color-text-dark: #646464;
  --color-disabled: #bebebe;

  /* Typography */
  /* --font-family-sans: "Verdana", "Geneva", sans-serif; */
  --font-family-sans: Nunito,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  --font-size-base: 1rem; 
  --font-size-xs: 0.75rem; 
  --font-size-sm: 0.875rem; 
  --font-size-md: 1rem; 
  --font-size-lg: 1.125rem; 
  --font-size-xl: 1.25rem; 
  --font-size-xxl: 1.5rem; 
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-small: 0.5em;
  --spacing-medium: 1em;
  --spacing-large: 2em;

  /* Borders */
  --border-radius: 0.5em;
  --border-color: #22222222;
}