:root {
  /* typo */
  --font-family: 'VT323', monospace;
  --font-size-base: 20px;
  --font-size-sm: 16px;
  --font-size-lg: 24px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* colors */
  --color-bg: #F5F0EB;
  --color-grid-line: rgba(0, 0, 0, 0.06);
  --color-grid-hover: #F5EDE3;
  --color-cell-0: #73A9AD;  /* Muted Teal */
  --color-cell-1: #90C8AC;  /* Sage Green */
  --color-cell-2: #C4DFAA;  /* Light Yellow-Green */
  --color-cell-3: #F5F0BB;  /* Pale Cream Yellow */
  --color-window-title-bg: #4A8FE8;
  --color-window-body-bg: #f5f5f5;
  --color-window-border: #3670b8;
  --color-window-title-bg-yellow: #F0D080;
  --color-window-border-yellow: #c4a54e;
  --color-taskbar-bg: #4A8FE8;
  --color-taskbar-text: #fff;
  --color-icon-label: #333;
  --color-text: #333;

  /* z-index layers */
  --z-background: 0;
  --z-desktop: 10;
  --z-windows: 20;
  --z-taskbar: 30;

  /* spacing */
  --taskbar-height: 64px;
  --icon-size: 72px;
  --cell-size: 12px;
  --folder-sidebar-width: 120px;
  --folder-item-size: 56px;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  font-weight: 500;
}

*, *::before, *::after {
  cursor: url('../assets/arrow1_sm.png'), auto;
}

a, button, [role="button"] {
  cursor: url('../assets/hand1_sm.png'), pointer;
}