:root {
  /* Neutral scale (light to dark) */
  --neutral-100: #ffffff;
  --neutral-200: #f8f8f8;
  --neutral-300: #f0f0f0;
  --neutral-400: #e0e0e0;
  --neutral-500: #c0c0c0;
  --neutral-600: #a6a6a6;
  --neutral-700: #555555;
  --neutral-800: #1a1a1a;
  --neutral-900: #111111;

  /* Font sizes */
  --font-size-base: 0.75rem;
  --font-size-medium: 0.92rem;

  /* Font weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 800;

  /* Spacing */
  --padding-base: 12px;
  --padding-large: 20px;

  /* Default mode */
  --color-background: var(--neutral-100);
  --color-background-clear: rgba(255,255,255,0.8);
  --color-text: var(--neutral-900);
  --color-border: var(--neutral-600);

  /* Grid border */
  /* --border-width: 0.5px
*/
} 

/* @media 
(-webkit-max-device-pixel-ratio: 1.99),
(max-resolution: 191dpi),
(max-resolution: 1.99dppx) {
  :root {
    --border-width: 1px;
    --color-border: black;
  }
} */

/* Dark mode */
/* @media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--neutral-800);
    --color-background-clear: rgba(26,26,26,0.8);
    --color-text: var(--neutral-100);
    --color-border: var(--neutral-700);
  }
} */

/* Manual dark mode class */
.dark-mode {
    --color-background: var(--neutral-800);
    --color-background-clear: rgba(26,26,26,0.8);
    --color-text: var(--neutral-100);
    --color-border: var(--neutral-700);
}