@font-face {
    font-family: "Milk And Honey";
    src: url("../../font/Milk_And_Honey.ttf") format("truetype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
}

:root {
    --dsb-color-ink: #680d0f;
    --dsb-color-primary: #c72725;
    --dsb-color-primary-dark: #6c0a09;
    --dsb-color-cream: #f5e8dd;
    --dsb-color-surface: #ffffff;
    --dsb-color-page-start: #fbf0e6;
    --dsb-color-page-middle: #f1c8bb;
    --dsb-color-page-end: #c72725;
    --dsb-color-focus: #17396c;
    --dsb-color-error: #9f1717;
    --dsb-color-button-rim: #f3c19a;

    --dsb-font-display: "Milk And Honey", Georgia, serif;
    --dsb-font-body: "Poppins", Arial, sans-serif;

    --dsb-text-xs: 13px;
    --dsb-text-sm: 14px;
    --dsb-text-md: 16px;
    --dsb-text-lg: 20px;
    --dsb-text-xl: 24px;
    --dsb-leading-body: 16px;
    --dsb-leading-control: 22px;

    --dsb-space-1: 4px;
    --dsb-space-2: 6px;
    --dsb-space-3: 8px;
    --dsb-space-4: 12px;
    --dsb-space-5: 16px;
    --dsb-space-6: 24px;
    --dsb-space-7: 32px;

    --dsb-radius-control: 18px;
    --dsb-radius-illustration: 32px;
    --dsb-radius-round: 999px;

    --dsb-page-width: 600px;
    --dsb-content-width: 327px;
    --dsb-header-width: 343px;
    --dsb-control-height: 54px;
    --dsb-action-height: 49px;
    --dsb-logo-box: 60px;
}