:root {
    --ui-color-ink: #1B1D18;
    --ui-color-muted: #5F665D;
    --ui-color-surface: #FFFDF7;
    --ui-color-soft: #F7F4EF;
    --ui-color-line: #DFD4C3;
    --ui-color-brand: #245A3B;
    --ui-color-brand-soft: #DFE8DC;
    --ui-color-accent: #C86138;
    --ui-color-accent-dark: #A64F31;
    --ui-color-danger: #A64F31;

    --ui-shadow-sm: 0 8px 20px rgba(27, 29, 24, .07);
    --ui-shadow-md: 0 16px 42px rgba(27, 29, 24, .11);

    --ui-radius-sm: 8px;
    --ui-radius-md: clamp(10px, 2.8vw, 14px);
    --ui-radius-lg: clamp(14px, 4vw, 20px);
    --ui-radius-pill: 999px;

    --ui-space-1: clamp(4px, 1.1vw, 8px);
    --ui-space-2: clamp(8px, 2vw, 14px);
    --ui-space-3: clamp(14px, 3.2vw, 24px);
    --ui-space-4: clamp(20px, 4.8vw, 36px);

    --ui-font-xs: clamp(.66rem, 1.8vw, .86rem);
    --ui-font-sm: clamp(.78rem, 2.1vw, 1rem);
    --ui-font-md: clamp(.96rem, 2.55vw, 1.14rem);
    --ui-font-lg: clamp(1.06rem, 2.85vw, 1.32rem);

    --ui-icon-xs: clamp(19px, 5vw, 24px);
    --ui-icon-sm: clamp(22px, 6vw, 30px);
    --ui-icon-md: clamp(28px, 7.4vw, 40px);
    --ui-control-height: clamp(44px, 11.8vw, 56px);
}