:root {
    --sidebar-width: 270px;
    --page-height: 280px;
    --color-pink: #F7D1E7;
    --color-pink-hover: #EBA8CE;
    --color-page: #f0f8ff;
    --color-background: #fff;
    --color-border: #d3d3d3;
    --color-border-selected: #555;
    --border-radius-card: 10px;
    --size-sm: 1rem;
    --size-md: 1.5rem;
    --size-lg: 2rem;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --header-1: 1.5rem;
    --header-2: 1.2rem;
    --header-3: 1rem;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #202124;
}

.btn-pink {
    background-color: var(--color-pink);
    border-color: var(--color-pink);
}

.btn-pink:hover,
.btn-pink:active,
.btn-pink:focus {
    background-color: var(--color-pink-hover) !important;
    border-color: var(--color-pink-hover) !important;
}

#app-navbar {
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-background);
}