@layer tokens {

:root {

    --bobr-space-max: 120px;
    --bobr-space: 60px;
    --bobr-space-middle: 40px;
    --bobr-space-min: 20px;
    --bobr-space-micro: 6px;
    --bobr-space-data: var(--bobr-space-min);

    --bobr-radius: .66rem;
    --bobr-radius-min: .55rem;
    --bobr-radius-micro: calc(var(--bobr-radius-min) * .66);
    --bobr-radius-max: 22rem;

    --bobr-color-pink: #fe46a2;
    --bobr-color-green: #14c11b;
    --bobr-color-green-dark: #15d715;
    --bobr-color-green-deep: #0b9e00;
    --bobr-color-blue: #006df8;
    --bobr-color-blue-dark: #0062df;
    --bobr-color-blue-bootstrap5: #0070ff;
    --bobr-color-blue-light: #83acff;
    --bobr-color-gray: #2e2e2e;
    --bobr-color-gray-middle: #b5b5b5;
    --bobr-color-gray-border: #e7e7e7;
    --bobr-color-gray-light: #f3f4f6;
    --bobr-color-red: #ff3838;
    --bobr-color-red-orange: orangered;
    --bobr-color-black-light: #393939;
    --bobr-color-gold: #ff9300;
    --bobr-color-orange: #ff7b00;

    --bobr-color-blue-hover: #1764ff;
    --bobr-color-blue-light-hover: #e1f1ff;
    --bobr-color-red-light-hover: #ffe1e1;
    --bobr-color-red-hover: rgb(196, 0, 0);
    --bobr-color-orange-hover: #ff731b;

    --layout-max-width: 1280px;

    --component-input-bg: #efefef;
    --component-placeholder-text: rgb(0 0 0 / 34%);
    --component-placeholder-hover-text: rgb(0 103 255 / 22%);
    --component-focus-shadow: 0 0 0 .4px var(--bobr-color-blue-light);
    --component-button-transition: opacity .15s, transform .15s ease-in-out;
    --component-desc-min-font-size: 12.8px;
}

}