:root {
  /* Colors */
  --color-primary: #fff8d2;
  --color-on-primary: #000000;

  --color-primary-active: #fff8d2;
  --color-on-primary-active: #000000;

  --color-primary-passive: #fff8d2;
  --color-on-primary-passive: #000000;

  --color-secondary: #04b8c8;
  --color-on-secondary: #000000;

  --color-secondary-active: #36c6d3;
  --color-on-secondary-active: #000000;

  --color-secondary-passive: #0393a0;
  --color-on-secondary-passive: #000000;

  --color-background: #1473cc;
  --color-on-background: #e2f1ff;

  --color-surface: #1473cc;
  --color-on-surface: #e2f1ff;

  --color-important: #db0c63;
  --color-on-important: #ffffff;

  --color-information: #1086ee;
  --color-on-information: #ffffff;

  --color-border: rgba(100, 100, 100, 0.7);
  --color-shadow: rgba(50, 50, 50, 0.5);
  --color-highlight: rgba(100, 100, 100, 0.2);

  /* Sizes */
  --size-text: 1rem;
  --size-text-small: 0.8rem;
  --size-text-large: 1.4rem;

  --size-space: 1rem;
  --size-space-small: 0.5rem;
  --size-space-large: 1.5rem;

  --size-radius: 5px;
  --size-radius-small: 3px;
  --size-radius-large: 9px;

  --size-border: 1px;
  --size-shadow: 8px;
}