:root {

    --color-background: #171b21;
    --color-background-alt: #35a853;
    --color-surface: #222730;
    --color-surface-alt: #2c323c;

    --color-text: #e8ebef;
    --color-text-muted: #9ba3af;

    --color-primary: #4f7fa8;
    --color-primary-hover: #6495bd;

    --color-accent: #d5a24c;
    --color-accent-hover: #e2b665;

    --color-success: #5faf78;
    --color-warning: #d5a24c;
    --color-error: #d86b6b;


    /* Spacing */
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;

    /* Geometry */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Effects */
    --shadow-sm: 0 1px 3px rgb(0 0 0 / 12%);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 15%);
}