@layer settings {
:root {
    color-scheme: light;

    --font-family-primary: "Montserrat", Arial, sans-serif;
    --text-strong-11-size: 11px;
    --text-strong-11-weight: 700;
    --text-strong-11-line-height: 1.1;

    --color-brand-orange: #f79433;
    --color-brand-orange-bright: #ff932f;
    --color-brand-dark: #282828;
    --color-header-dark: #242424;
    --color-surface: #ffffff;
    --color-text-body: #4d4d4d;
    --color-text-control: #333333;
    --color-text-secondary: #555555;
    --color-text-tertiary: #777777;
    --color-text-emphasis: #525252;
    --color-control-placeholder: #949191;
    --color-control-surface: #f5f5f5;
    --color-icon-muted: #d4d4d4;
    --color-section-muted: #e4e5e6;
    --color-brand-orange-pale: #fae0c5;
    --color-accent-contrast: #ffffff;
    --color-state-error: #ff0000;
    --color-divider: #bcbcbc;
    --color-surface-warm: #fdefde;
    --color-surface-subtle: #f0f0f0;

    --radius-control: 5px;
    --radius-feature: 12px;
    --radius-panel: 13px;
    --radius-checkbox: 2px;

    --shadow-low: 0 4px 4px rgb(0 0 0 / 25%);

    --container-max-width: 1140px;
    --container-padding-x: 30px;
    --container-padding-x-mobile: 10px;

    --z-header: 100;
}
}