:root {

  --color-bg:              hsl(240, 14%, 6%);
  --color-bg-elevated:     hsl(240, 12%, 10%);
  --color-bg-overlay:      hsl(240, 12%, 14%);
  --color-bg-input:        hsl(240, 10%, 12%);
  --color-bg-hover:        hsl(240, 10%, 16%);

  --color-border:          hsl(240, 8%, 20%);
  --color-border-strong:   hsl(240, 8%, 30%);
  --color-border-focus:    hsl(220, 60%, 55%);
  --color-focus-ring:      hsl(220 60% 55% / 0.2);

  --color-text:            hsl(220, 15%, 88%);
  --color-text-muted:      hsl(220, 10%, 55%);
  --color-text-faint:      hsl(220, 8%, 38%);
  --color-text-inverse:    hsl(240, 14%, 6%);

  --color-accent:          hsl(220, 60%, 55%);
  --color-accent-hover:    hsl(220, 60%, 62%);
  --color-accent-subtle:   hsl(220, 40%, 18%);

  --color-success:         hsl(145, 45%, 45%);
  --color-success-subtle:  hsl(145, 30%, 14%);
  --color-warning:         hsl(38, 70%, 55%);
  --color-warning-subtle:  hsl(38, 40%, 14%);
  --color-danger:          hsl(0, 55%, 52%);
  --color-danger-hover:    hsl(0, 55%, 60%);
  --color-danger-subtle:   hsl(0, 35%, 14%);
  --color-danger-ring:     hsl(0 55% 52% / 0.2);
  --color-modal-backdrop:  hsl(0 0% 0% / 0.6);

  --color-cat-document:    hsl(210, 50%, 55%);
  --color-cat-device:      hsl(175, 45%, 45%);
  --color-cat-belonging:   hsl(35, 55%, 50%);
  --color-cat-person:      hsl(280, 40%, 55%);
  --color-cat-note:        hsl(55, 40%, 50%);
  --color-cat-credit-card: hsl(340, 50%, 55%);
  --color-cat-sim-card:    hsl(120, 35%, 45%);
  --color-cat-document-bg:    hsl(210 50% 55% / 0.15);
  --color-cat-device-bg:      hsl(175 45% 45% / 0.15);
  --color-cat-belonging-bg:   hsl(35 55% 50% / 0.15);
  --color-cat-person-bg:      hsl(280 40% 55% / 0.15);
  --color-cat-note-bg:        hsl(55 40% 50% / 0.15);
  --color-cat-credit-card-bg: hsl(340 50% 55% / 0.15);
  --color-cat-sim-card-bg:    hsl(120 35% 45% / 0.15);

  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;

  --font-family:     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:       ui-monospace, "Cascadia Code", "Fira Code", Menlo, Consolas, monospace;

  --text-xs:         0.75rem;
  --text-sm:         0.8125rem;
  --text-base:       0.875rem;
  --text-md:         1rem;
  --text-lg:         1.125rem;
  --text-xl:         1.375rem;
  --text-2xl:        1.75rem;
  --text-3xl:        2.25rem;

  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;

  --line-height-tight:   1.25;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight:  -0.01em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.04em;

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  --shadow-sm:   0 1px 2px  hsl(0 0% 0% / 0.3);
  --shadow-md:   0 4px 12px hsl(0 0% 0% / 0.35);
  --shadow-lg:   0 8px 24px hsl(0 0% 0% / 0.4);
  --shadow-glow: 0 0 16px   hsl(220 60% 55% / 0.15);

  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);

  --z-base:     1;
  --z-header:   100;
  --z-dropdown: 200;
  --z-modal:    300;
  --z-toast:    400;

  --header-height: 56px;
  --status-bar-height: 32px;
  --sidebar-width: 260px;
  --content-max-width: 720px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
    --duration-slow:   0ms;
  }
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
}