:root {
    --color-sidebar: #17191d;
    --color-sidebar-raised: #242931;
    --color-primary: #ff7a1a;
    --color-primary-strong: #dc5a00;
    --color-primary-soft: #fff1e6;
    --color-bg: #f5f2ed;
    --color-bg-alt: #ece8e1;
    --color-surface: #ffffff;
    --color-surface-muted: #faf8f5;
    --color-border: #ded8cf;
    --color-text: #17191d;
    --color-text-soft: #3c424d;
    --color-muted: #707884;
    --color-success: #227c58;
    --color-warning: #a86600;
    --color-danger: #bd3a2d;
    --color-info: #235fbe;

    --font-body: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
    --font-display: "Gill Sans", "Avenir Next Condensed", "Trebuchet MS", sans-serif;

    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    --radius-sm: 0.75rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-pill: 999px;

    --shadow-sm: 0 10px 24px rgba(23, 25, 29, 0.06);
    --shadow-md: 0 18px 40px rgba(23, 25, 29, 0.09);
    --shadow-lg: 0 30px 70px rgba(23, 25, 29, 0.12);

    --input-height: 3.5rem;
    --button-height: 3.25rem;
    --topbar-height: 5rem;
    --sidebar-width-tablet: 5.75rem;
    --sidebar-width-desktop: 17.5rem;
    --content-max-width: 76rem;
    --content-max-width-wide: 88rem;

    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1025px;
    --breakpoint-wide: 1440px;

    --z-sticky: 20;
    --z-toast: 50;
}