@charset "utf-8";

/* ============================================
   CSS Variables - Цветовая палитра сайта
   ============================================ */

:root {
    /* Основные цвета */
    --color-black: #000;
    --color-white: #fff;

    /* Брендовые цвета (диапазон #4D4D4D — #A3A7AB), бывшие #ff0070/#ff0074 объединены */
    --color-brand-pink: #4D4D4D; /* основной акцент (объединённый цвет) */
    --color-brand-pink-light: #A3A7AB; /* светлый */
    --color-brand-pink-dark: var(--color-brand-pink); /* тот же что и основной */
    --color-brand-pink-hover: #7E8286; /* при наведении */
    --color-brand-pink-accent: #8E9296;
    --color-brand-pink-accent-alt: #7A7E82;

    /* Серые оттенки - упорядочены от светлого к темному */
    --color-gray-50: #f9f9f9;
    --color-gray-100: #f5f5f5;
    --color-gray-110: #f4f4f4;
    --color-gray-120: #f1f1f1;
    --color-gray-140: #8c8c8c;
    --color-gray-150: #9d9d9d;
    --color-gray-160: #9B9B9B;
    --color-gray-170: #999;
    --color-gray-180: #a0a0a0;
    --color-gray-190: #a9a8a8;
    --color-gray-200: #adadad;
    --color-gray-210: #b0afaf;
    --color-gray-220: #b1b1b1;
    --color-gray-230: #bfbfbf;
    --color-gray-240: #c2c2c2;
    --color-gray-250: #c3c3c3;
    --color-gray-260: #c5c5c5;
    --color-gray-270: #ccc;
    --color-gray-280: #cdcdcd;
    --color-gray-290: #d1d1d1;
    --color-gray-300: #d5d2d2;
    --color-gray-310: #d5d5d5;
    --color-gray-320: #d8d8d8;
    --color-gray-330: #d9d9d9;
    --color-yellow: #dad55e; /* бывший gray-340 */
    --color-gray-350: #ddd;
    --color-gray-360: #dfdfdf;
    --color-gray-370: #e0e0e0;
    --color-gray-380: #e6e6e6;
    --color-gray-390: #e9e9e9;
    --color-gray-400: #eee;
    --color-gray-410: #ededed;
    --color-gray-430: #EFF2F4;
    --color-gray-440: #F6F6F6;
    --color-gray-460: #8f8f8f;
    --color-gray-470: #707070;
    --color-gray-480: #666;
    --color-gray-490: #757575;
    --color-gray-500: #333;
    --color-gray-520: #454545;
    --color-brown-dark: #5f3f3f; /* бывший gray-530 */
    --color-olive: #777620; /* бывший gray-540 */
    --color-red-dark: #801532; /* бывший gray-550 */
    --color-ink: #241f1f; /* бывший gray-560 */
    --color-gray-570: #989898;
    --color-gray-115: #737373;
    --color-gray-135: #878787;

    /* Цвета состояний */
    --color-success: green;
    --color-error: red;
    --color-error-dark: #cc0000;
    --color-warning: #fffa90;

    /* Цвета для границ */
    --color-border-light: var(--color-gray-330);
    --color-border-medium: var(--color-gray-270);
    --color-border-dark: var(--color-black);
    --color-border-gray: var(--color-gray-350);
    --color-border-gray-light: var(--color-gray-380);
    --color-border-gray-medium: var(--color-gray-240);
    --color-border-gray-dark: var(--color-gray-190);
    --color-border-gray-lighter: var(--color-gray-360);
    --color-border-gray-lightest: var(--color-gray-400);
    --color-border-gray-very-light: var(--color-gray-290);
    --color-border-gray-extra-light: var(--color-gray-320);
    --color-border-gray-extra-light-alt: var(--color-gray-310);
    --color-border-gray-extra-light-alt2: var(--color-gray-250);
    --color-border-gray-dark-alt: var(--color-gray-480);
    --color-border-gray-medium-alt: var(--color-gray-170);
    --color-border-brand-pink: var(--color-brand-pink);
    --color-border-brand-pink-hover: var(--color-brand-pink-hover);
    --color-border-dashed-light: var(--color-rgba-black-03);
    --color-border-dashed-medium: var(--color-rgba-black-02);
    --color-border-dashed-dark: var(--color-rgba-black-04);
    --color-border-dashed-gray: var(--color-rgba-gray-02);
    --color-border-gray-extra-dark: var(--color-gray-480);
    --color-border-gray-dark-medium: var(--color-gray-280);
    --color-border-white: var(--color-white);
    --color-border-white-transparent: rgba(255, 255, 255, 0.2);
    --color-border-gray-light-medium: var(--color-gray-240);
    --color-border-gray-medium-light: var(--color-gray-240);
    --color-border-gray-medium-light-alt: var(--color-gray-280);
    --color-border-gray-medium-dark: var(--color-gray-460);
    --color-border-gray-light-border: var(--color-gray-380);
    --color-border-gray-medium-border: var(--color-gray-170);
    --color-border-gray-light-medium-alt: var(--color-gray-290);
    --color-border-error: #c30;
    --color-border-success-light: #afa;
    --color-border-error-light: #faa;
    --color-border-gray-medium-alt2: var(--color-gray-200);
    --color-border-brand-pink-transparent: rgba(107, 111, 115, 0.4); /* Прозрачный бренд (серый) */

    /* Цвета фона */
    --color-bg-white: var(--color-white);
    --color-bg-black: var(--color-black);
    --color-bg-light: #f1f1f1;
    --color-bg-gray: #f6f6f6;
    --color-bg-gray-light: #f9f9f9;
    --color-bg-gray-medium: #e9e9e9;
    --color-bg-disabled: #b1b1b1;

    /* Цвета текста */
    --color-text-black: var(--color-black);
    --color-text-white: var(--color-white);
    --color-text-gray: var(--color-gray-150);
    --color-text-gray-light: var(--color-gray-350);
    --color-text-gray-medium: var(--color-gray-170);
    --color-text-gray-dark: var(--color-gray-500);
    --color-text-placeholder: var(--color-gray-150);

    /* Цвета для UI элементов */
    --color-ui-active: #007fff;
    --color-ui-active-border: #003eff;
    --color-ui-highlight: #fffa90;
    --color-ui-highlight-border: var(--color-yellow);
    --color-ui-error-bg: #fddfdf;
    --color-ui-error-border: #f1a899;

    /* RGBA цвета */
    --color-rgba-black-0: rgba(0, 0, 0, 0);
    --color-rgba-black-015: rgba(0, 0, 0, 0.15);
    --color-rgba-black-02: rgba(0, 0, 0, 0.2);
    --color-rgba-black-03: rgba(0, 0, 0, 0.3); /* Объединены с gray-border-03 */
    --color-rgba-black-04: rgba(0, 0, 0, 0.4);
    --color-rgba-black-05: rgba(0, 0, 0, 0.5);
    --color-rgba-black-07: rgba(0, 0, 0, 0.7); /* Объединены с gray-border-07 */
    --color-rgba-white-07: rgba(255, 255, 255, 0.7);
    --color-rgba-white-082: rgba(255, 255, 255, 0.82);
    --color-rgba-white-1: rgba(255, 255, 255, 1);
    --color-rgba-gray-015: rgba(153, 153, 153, 0.15);
    --color-rgba-gray-02: rgba(153, 153, 153, 0.2);
    --color-rgba-pink-05: rgba(240, 72, 132, 0.5);
    --color-rgba-gray-border-05: rgba(198, 198, 198, 0.5);
    --color-rgba-gray-93: rgba(93, 93, 93, 1);
    --color-rgba-gray-148: rgba(148, 148, 148, 1);

    /* Специфичные цвета для компонентов */
    --color-checkbox-border: var(--color-black);
    --color-input-border: #a0a0a0;
    --color-input-border-focus: var(--color-black);
    --color-input-placeholder: var(--color-gray-150);
    --color-button-bg: var(--color-black);
    --color-button-text: var(--color-white);
    --color-button-hover-bg: #d5d2d2;
    --color-button-hover-text: var(--color-black);
    --color-button-border-hover: #f1f1f1;
    --color-link-hover: rgba(0, 0, 0, 0.4);
    --color-link-hover-border: rgba(0, 0, 0, 0.3);

    /* Цвета социальных сетей */
    --color-social-facebook: #3b5998;
    --color-social-facebook-hover: #344e86;
    --color-social-pinterest: #bd081d;
    --color-social-pinterest-hover: #aa0719;
    --color-social-twitter: #1da1f2;

    --font-family-mfd: 'Wix Madefor Display', Arial, sans-serif;
    --font-family-primary: var(--font-family-mfd);
    --font-family-heading: var(--font-family-mfd);
    --font-family-heading-serif: var(--font-family-mfd);
    --font-family-ui: var(--font-family-mfd);
    --font-family-simple: var(--font-family-mfd);
    --font-family-roboto-light: var(--font-family-mfd);
    --font-family-roboto-regular: var(--font-family-mfd);
    --font-family-roboto-medium: var(--font-family-mfd);
    --font-family-roboto-alt: var(--font-family-mfd);
}