:root {
    --slw-red: #c9141d;
    --slw-red-dark: #8f0f17;
    --slw-red-soft: #fff0f1;
    --slw-black: #111318;
    --slw-charcoal: #1d2027;
    --slw-sidebar: #171a20;
    --slw-gray-900: #242830;
    --slw-gray-700: #59616d;
    --slw-gray-500: #858d98;
    --slw-gray-300: #d5d9df;
    --slw-gray-200: #e7e9ed;
    --slw-gray-100: #f4f5f7;
    --slw-white: #ffffff;

    --slw-radius-sm: 6px;
    --slw-radius: 10px;
    --slw-radius-lg: 16px;

    --slw-shadow-sm: 0 1px 2px rgba(17, 19, 24, .05);
    --slw-shadow: 0 10px 30px rgba(17, 19, 24, .07);
    --slw-shadow-lg: 0 18px 48px rgba(17, 19, 24, .12);
    --slw-focus: 0 0 0 3px rgba(201, 20, 29, .16);
    --slw-transition: 160ms ease;

    --header-height: 74px;
    --area-nav-height: 46px;
    --sidebar-width: 230px;
}