:root {
  --sidebar-width: 180px;
  --snippets-list-width: 220px;
  --snippets-view-header-height: 60px;
  --snippets-view-header-full-height: calc(var(--snippets-view-header-height) + var(--snippets-tags-height));
  --snippets-view-footer-height: 30px;
  --snippet-tab-header-height: 40px;
  --snippet-tab-height: 30px;
  --title-bar-height: 20px;
  --menu-header: 80px;

  --spacing-unit: 4px;
  --spacing-xs: calc(var(--spacing-unit) * 2);
  --spacing-sm: calc(var(--spacing-unit) * 4);
  --spacing-md: calc(var(--spacing-unit) * 6);
  --spacing-lg: calc(var(--spacing-unit) * 8);
  --spacing-xl: calc(var(--spacing-unit) * 10);

  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-code: Menlo, Monaco, "Courier New", monospace;

  --text-base-size: 10px;
  --text-xs: calc(var(--text-base-size) * 1);
  --text-sm: calc(var(--text-base-size) * 1.2);
  --text-md: calc(var(--text-base-size) * 1.4);
  --text-lg: calc(var(--text-base-size) * 1.8);
  --text-xl: calc(var(--text-base-size) * 2.4);
  --text-xxl: calc(var(--text-base-size) * 3.2);
  --text-xxxl: calc(var(--text-base-size) * 3.6);
}

[data-theme='light'] {
  --color-primary: hsl(213, 81%, 67%);

  --color-bg: hsl(0, 0%, 100%);
  --color-contrast-lower: hsl(0, 0%, 97%);
  --color-contrast-low: hsl(0, 0%, 85%);
  --color-contrast-low-alt: hsl(0, 0%, 80%);
  --color-contrast-medium: hsl(0, 0%, 50%);
  --color-contrast-high: hsl(0, 0%, 15%);
  --color-contrast-higher: hsl(0, 0%, 0%);

  --color-text: var(--color-contrast-high);
  --color-border: var(--color-contrast-low);
}

[data-theme='dark'] {
  --color-primary: hsl(213, 81%, 67%);

  --color-bg: hsl(0, 0%, 20%);
  --color-contrast-lower: hsl(0, 0%, 25%);
  --color-contrast-low: hsl(0, 0%, 32%);
  --color-contrast-low-alt: hsl(0, 0%, 37%);
  --color-contrast-medium: hsl(0, 0%, 50%);
  --color-contrast-high: hsl(0, 0%, 85%);
  --color-contrast-higher: hsl(0, 0%, 100%);

  --color-text: var(--color-contrast-high);
  --color-border: var(--color-contrast-low);
}
