:root {
    /* colors-primitives / semantic tokens from rb design-system */
    --rb-bg-primary: #fdfcfc;
    --rb-bg-secondary: #f2f3f5;
    --rb-bg-tertiary: #e7e8ea;
    --rb-bg-accent: #ef3124;
    --rb-bg-accent-hover: #ff4a3e;
    --rb-bg-dark: #0e0e0e;
    --rb-bg-positive: #0d9336;

    --rb-text-primary: rgba(3, 3, 6, 0.88);
    --rb-text-secondary: rgba(4, 4, 19, 0.56);
    --rb-text-tertiary: rgba(5, 8, 29, 0.38);
    --rb-text-accent: #ef3124;
    --rb-text-on-accent: rgba(255, 255, 255, 0.94);

    --rb-border-primary: #d5d6dc;
    --rb-border-secondary: #e7e8ea;
    --rb-border-focus: rgba(239, 49, 36, 0.2);

    --rb-radius-s: 0.25rem;
    --rb-radius-m: 0.5rem;
    --rb-radius-l: 0.5rem;

    --rb-spacing-s: 0.75rem;
    --rb-spacing-m: 1rem;
    --rb-spacing-l: 1.5rem;
    --rb-spacing-xl: 2.5rem;

    --rb-shadow-xs: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.04), 0 0 0.0625rem 0 rgba(0, 0, 0, 0.04);
}

@media (min-width: 1199px) {
    :root {
        --rb-radius-l: 0.75rem;
        --rb-spacing-s: 1rem;
        --rb-spacing-m: 1.5rem;
        --rb-spacing-l: 2rem;
        --rb-spacing-xl: 3rem;
    }
}