:root {
    --bg: #ebe8e4;
    --surface: rgba(255, 255, 255, 0.66);
    --surface-strong: rgba(255, 255, 255, 0.84);
    --surface-dark: #353747;
    --primary: #48719f;
    --accent: #82d0d5;
    --text: #202532;
    --text-soft: #62697a;
    --text-on-dark: #f4f7fb;
    --border: rgba(72, 113, 159, 0.14);
    --border-strong: rgba(72, 113, 159, 0.28);
    --shadow-sm: 0 10px 22px rgba(53, 55, 71, 0.08);
    --shadow-md: 0 18px 42px rgba(53, 55, 71, 0.12);
    --shadow-lg: 0 28px 60px rgba(53, 55, 71, 0.16);
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --transition-fast: 160ms ease;
    --transition-normal: 240ms ease;
    --sidebar-width: 280px;
    --topbar-height: 62px;
    --tasks-height: 150px;
    --footer-height: 38px;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
    color: var(--text);
    background: radial-gradient(circle at top left, rgba(130, 208, 213, 0.22), transparent 26%), radial-gradient(circle at top right, rgba(72, 113, 159, 0.12), transparent 24%), linear-gradient(180deg, #f6f4f1 0%, var(--bg) 56%, #e3dfd9 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* {
    box-sizing: border-box;
}

main[role="main"] {
    min-height: 100vh;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(72, 113, 159, 0.08);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(72, 113, 159, 0.70), rgba(130, 208, 213, 0.72));
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.22);
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, rgba(72, 113, 159, 0.88), rgba(130, 208, 213, 0.88));
    }