:root {
    --hl-public-brand: #cf172d;
    --hl-public-brand-hover: #aa1023;
    --hl-public-text: #171717;
    --hl-public-text-secondary: #62666d;
    --hl-public-border: #d9dde4;
    --hl-public-surface: #ffffff;
    --hl-public-surface-subtle: #f6f7f9;
    --hl-public-error: #c9362b;
    --hl-public-control-height: 44px;
    --hl-public-radius: 6px;
    --hl-public-space-sm: 8px;
    --hl-public-space-md: 12px;
    --hl-public-space-lg: 16px;
    --hl-public-space-xl: 24px;
    --hl-public-field-width-compact: 120px;
    --hl-public-field-width-small: 200px;
    --hl-public-field-width-medium: 360px;
    --hl-public-field-width-large: 640px;
}