/* ============================================================
   Бренд-кит Дантистофф — tokens.css
   Слой 1 — палитра основного сайта клиники, перенесена 1:1 (имена и значения).
   Сгенерировано tools/extract/extract-tokens.mjs — не править руками,
   правки ролей — в tools/extract/tokens-roles.css.
   Где на сайте несколько значений, базовым взято первое; остальные — в комментарии.
   ============================================================ */
:root{
  /* --- background --- */
  --background-1: #efefef;
  --background-article: #fff2c6;
  --background-blue: #dde8f3;
  --background-light-gray: #faf9fa;
  --background-promo: #fbf6f2;
  --background-red: #ffece6;
  --background-youtube: #313131;
  /* --- badge --- */
  --badge-height: 190px; /* также: 192px | 162px */
  --badge-orange: #ef7b31;
  --badge-width: 200px; /* также: 183px | 171px */
  /* --- bg --- */
  --bg: var(--main-orange);
  --bg-active: #ff7333 0%, #ff9666 49.77%, #ff7333 100%;
  --bg-alabaster: #FAFAFA;
  --bg-blue-bell: #8F8FD5;
  --bg-catskill: #f1f5f9;
  --bg-crayola: #2D3447;
  --bg-dark-blue: #32334f;
  --bg-dolphin: #61617B;
  --bg-gray: #f8f7f5;
  --bg-inactive: #ff621a 0%, #ff854d 49.77%, #ff621a 100%;
  --bg-light-pink: #FEF5F1;
  --bg-peach: #FFEDE5;
  --bg-radial-smooth: 59.51% 59.98% at 50.11% 49.72%, #4D4F66 0%, #3B3A4C 60.23%, #302F43 100%;
  --bg-rhino: #3f3d5c;
  --bg-soft-gray: #f5f5f5;
  --bg-super-light: #F1F1F4;
  --bg-voi: #f8f7fc;
  /* --- border --- */
  --border-color-border: #cfdbe9;
  --border-done: #747576;
  --border-gap: 8px; /* также: 5px */
  /* --- btn --- */
  --btn-active-color-orange: #d05e2d;
  --btn-hover-color-orange: #ef7b31;
  --btn-leading-large: 135%;
  --btn-leading-mobile: 119%;
  --btn-leading-norm: 135%;
  --btn-rounded-norm: 12px;
  --btn-size: 50px; /* также: 37.5px */
  --btn-text-large: 20px;
  --btn-text-mobile: 16px;
  --btn-text-norm: 18px;
  /* --- card --- */
  --card-width: 23.333%; /* также: 32% | 49% */
  /* --- char --- */
  --char-count: 42;
  /* --- character --- */
  --character-width: 1.5;
  --character-width-ring-item: 1.15; /* также: 1.25 */
  /* --- circle --- */
  --circle-width: 44px;
  /* --- col --- */
  --col-gap: 2%;
  /* --- color --- */
  --color-alabaster: #f9fafa;
  --color-anthracite: #504d61;
  --color-arty-orange: #fb7e01;
  --color-black: #000;
  --color-blaze-orange: #f97400;
  --color-blue-tealish: #e5ecff;
  --color-catskill-white: #f1f5f9;
  --color-chrome-white: #e9f0d5;
  --color-clay: #1E293B;
  --color-clear-blue: #167bfb;
  --color-crayola: #2D3447;
  --color-cyan-blue: #475569;
  --color-dawn-pink: #fde8e8;
  --color-dolphin: #61617b;
  --color-dusk: #4f4e74;
  --color-fuscous-grey: #58514c;
  --color-gray: #bebdca;
  --color-lamantin: #9d9daf;
  --color-lavender: #e8e5ff;
  --color-light-gray: #d9d9d9;
  --color-light-orange: #fdf1ec;
  --color-light-pink: #fef5f1;
  --color-linen: #fdeee8;
  --color-magenta: #fbe5ff;
  --color-magnolia: #f6f5ff;
  --color-martini: #a6a6a6;
  --color-misty-rose: #fbe4da;
  --color-navy: #1c1a2a;
  --color-old-lace: #fff5eb; /* также: #fff3e5 */
  --color-olso-grey: #8c8c8c;
  --color-pastel-brown: #816257;
  --color-pearl: #fdf1ec;
  --color-pearly: #62617b;
  --color-pink: #BBB2FF;
  --color-rhino: #3f3d5c;
  --color-sapphire: #3939b3;
  --color-ship-grey: #3d3b44;
  --color-slate-grey: #777996;
  --color-soft-dark: #404040;
  --color-soft-gray: #919191;
  --color-soft-peach: #eeeef6;
  --color-soft-purple: #8b8bf7;
  --color-star-dust: #9b9a9f;
  --color-steel: #7f7f9a;
  --color-titan-white: #f0eeff;
  --color-vampire-grey: #5a504c;
  --color-warm-blue: #4f4ccc;
  --color-water-blue: #08c;
  /* --- container --- */
  --container-2xl: 1495px;
  --container-3xl: 1580px;
  --container-lg: 1024px;
  --container-md: 1138px;
  --container-padding: 16px; /* также: 6px */
  --container-xl: 1366px;
  /* --- deg --- */
  --deg: 180deg;
  /* --- font --- */
  --font-black: 900;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-light: 300;
  --font-medium: 500;
  --font-medium-bold: 525;
  --font-regular: 400;
  --font-regular-bold: 420;
  --font-semibold: 600;
  --font-size: 1rem;
  /* --- fs --- */
  --fs: var(--text-large); /* также: var(--text-mobile-large) */
  /* --- gap --- */
  --gap: 20px; /* также: 0px | 5px | 3px | 2% | .82% | 10px | 12px | 8px | 17px | 8.5px | 4px */
  /* --- gutter --- */
  --gutter: 8px;
  --gutter-mobile: 8px;
  /* --- h --- */
  --h: 43px; /* также: 26px */
  /* --- h3 --- */
  --h3-font-size: 22px;
  /* --- height --- */
  --height: calc(var(--main-nav-wrapper-height) + var(--gap)); /* также: 470px | 520px | 583.89px | 519px */
  /* --- hover --- */
  --hover-shadow: 0px 20px 50px 0px #00000026;
  /* --- i --- */
  --i-size: 95px; /* также: 64px | 96px | 27px */
  /* --- icon --- */
  --icon-grey: #dfdfdf;
  --icon-width: 19px;
  /* --- img --- */
  --img-url: url(/public/tooltip.svg); /* также: url(/public/info.svg) */
  /* --- increment --- */
  --increment: 1;
  /* --- inner --- */
  --inner-angle: calc((360 / var(--char-count, 43)) * 1deg);
  /* --- input --- */
  --input-error: #ffece6;
  /* --- leading --- */
  --leading-badge: 120%;
  --leading-banner-mobile: 125%;
  --leading-body: 165%;
  --leading-description-medium: 140%;
  --leading-h1: 118%;
  --leading-h1-small: 125%;
  --leading-h2: 125%;
  --leading-h3: 125%;
  --leading-h3-medium: 125%;
  --leading-h4: 125%;
  --leading-h5: 160%;
  --leading-large: 120%;
  --leading-med: 160%;
  --leading-menu: 119%;
  --leading-mini: 120%;
  --leading-minititle: 100%;
  --leading-mobile-body: 150%;
  --leading-mobile-description-medium: 150%;
  --leading-mobile-h1: 125%;
  --leading-mobile-h1-small: 125%;
  --leading-mobile-h2: 125%;
  --leading-mobile-h3: 125%;
  --leading-mobile-h4: 120%;
  --leading-mobile-h4-medium: 120%;
  --leading-mobile-h5: 150%;
  --leading-mobile-large: 120%;
  --leading-mobile-med: 120%;
  --leading-mobile-menu: 130%;
  --leading-mobile-mini: 120%;
  --leading-mobile-minititle: 135%;
  --leading-mobile-norm: 120%;
  --leading-mobile-xl: 160%;
  --leading-norm: 120%;
  --leading-reviews: 150%;
  --leading-xl: 140%;
  /* --- left --- */
  --left-color: #fb7e01;
  /* --- lh --- */
  --lh: var(--leading-large); /* также: var(--leading-mobile-large) | 165 */
  /* --- linear --- */
  --linear-gradient-site-notify: #201e30 0%, #4f4e74 52.09%, #201e30 99.38%; /* также: #0a171f */
  --linear-gradient-site-notify-active: #1d1b2c 0%, #474669 52.09%, #1e1c2c 99.38%; /* также: #163244 */
  /* --- main --- */
  --main-black: #272727;
  --main-blue: #9694b6;
  --main-color-black-primary: #000;
  --main-color-black-secondary: #272727;
  --main-color-orange-click: #e4790d;
  --main-color-orange-hover: #ff8e09;
  --main-color-red: #fb3d01;
  --main-color-text-white: #fff;
  --main-dark-orange: #e4790d;
  --main-gray: #6e6e6e;
  --main-green: #1c993f;
  --main-link-orange: #ffded1;
  --main-orange: #ed5d2b;
  --main-orange-secondary: #ed6a2f;
  --main-purple: #7c7cbd;
  --main-soft-gray: #8b8a8c;
  --main-soft-yellow: #fff9db;
  --main-white: #fff;
  --main-white-gray: #dedede;
  --main-yellow: #e9b610; /* также: #f7e14b */
  /* --- margin --- */
  --margin: 10px;
  /* --- mb --- */
  --mb: 10px;
  --mb-mob: 12px;
  /* --- p --- */
  --p: 20px; /* также: 16px */
  /* --- padding --- */
  --padding: 42px;
  --padding-sm: 16px; /* также: 18px 24px */
  /* --- paragraph --- */
  --paragraph-content-gutter: 64px;
  --paragraph-content-gutter-mobile: 32px;
  --paragraph-font-size: 16px;
  --paragraph-gutter: 16px;
  --paragraph-gutter-mobile: 12px;
  --paragraph-line-height: 135%;
  /* --- pt --- */
  --pt: 30px;
  /* --- px --- */
  --px: 24px;
  /* --- py --- */
  --py: 12px;
  /* --- radius --- */
  --radius: calc( (var(--character-width, 1.5) / sin(var(--inner-angle))) * -1ch );
  /* --- right --- */
  --right-color: #c8c8c8;
  /* --- rounded --- */
  --rounded: 10px; /* также: 28px | 21px */
  /* --- sb --- */
  --sb-color: var(--badge-orange);
  --sb-width: 3px;
  /* --- section --- */
  --section-gutter: 64px;
  --section-gutter-mobile: 32px;
  /* --- shadow --- */
  --shadow-big: 0px 7px 40px 0px #00000017;
  --shadow-color: #00000014;
  --shadow-medium: 0px 7px 25px 0px hsla(0, 0%, 0%, .1);
  --shadow-orange: 0px 5px 10px 0px #fb7e0199;
  --shadow-small: 0px 4px 20px 0px #00000017;
  /* --- social --- */
  --social-dark-black: #3d3b44;
  /* --- start --- */
  --start-number: 0;
  /* --- sys --- */
  --sys-green-whatapp: #50a035;
  /* --- text --- */
  --text-badge: 16px;
  --text-banner-mobile: 14px;
  --text-body: 18px;
  --text-description-medium: 20px;
  --text-h1: 56px;
  --text-h1-small: 46px;
  --text-h2: 34px;
  --text-h3: 26px;
  --text-h3-medium: 26px;
  --text-h4: 22px;
  --text-h5: 18px;
  --text-large: 18px;
  --text-med: 18px;
  --text-menu: 18px;
  --text-mini: 12px;
  --text-minititle: 14px;
  --text-mobile-body: 16px;
  --text-mobile-description-medium: 18px;
  --text-mobile-h1: 24px;
  --text-mobile-h1-small: 24px;
  --text-mobile-h2: 22px;
  --text-mobile-h3: 20px;
  --text-mobile-h4: 18px;
  --text-mobile-h4-medium: 18px;
  --text-mobile-h5: 16px;
  --text-mobile-large: 16px;
  --text-mobile-med: 14px;
  --text-mobile-menu: 15px;
  --text-mobile-mini: 10px;
  --text-mobile-minititle: 12px;
  --text-mobile-norm: 12px;
  --text-mobile-xl: 18px;
  --text-norm: 14px;
  --text-reviews: 20px;
  --text-sm: 10px;
  --text-xl: 24px;
  /* --- title --- */
  --title-font-size: 28px;
  --title-line-height: 130%;
  /* --- w --- */
  --w: clamp(28px, 2.1875vw + 14px, 42px);
  /* --- width --- */
  --width: 34px; /* также: 30px | 24px | 20px | 49% | 100% | 32% */
  /* --- x --- */
  --x: 50%;
  /* --- y --- */
  --y: 50%;
}

/* ============================================================
   Слой 2 — роли. Лендинги верстаются этими именами.
   Значения — алиасы на палитру сайта выше; литералы только там,
   где на сайте переменной нет (ТЗ №1) или нужен другой контраст.
   ============================================================ */
:root{
  /* акценты */
  --brand-orange: var(--main-orange);                 /* #ed5d2b */
  --brand-orange-hover: var(--main-color-orange-hover);/* #ff8e09 */
  --brand-orange-active: var(--main-color-orange-click);/* #e4790d */
  --brand-purple: var(--main-purple);                 /* #7c7cbd */
  --brand-purple-soft: var(--color-soft-purple);      /* #8b8bf7 */
  --brand-purple-deep: var(--color-warm-blue);        /* #4f4ccc */

  /* текст */
  --ink: var(--main-black);                           /* #272727 */
  --ink-soft: var(--color-soft-dark);                 /* #404040 */
  --ink-muted: var(--main-gray);                      /* #6e6e6e, 5.1:1 на белом */
  --ink-faint: var(--main-soft-gray);                 /* #8b8a8c — только подписи ≥ 14px */
  --ink-on-dark: #a5a5ad;                             /* подписи на --ink, 6.1:1 */
  --ink-on-dark-strong: #d9d9de;                      /* текст на --ink, 10.6:1 */

  /* поверхности */
  --surface: var(--main-white);
  --surface-light: #f9faf9;                           /* ТЗ: фон светлых блоков */
  --surface-magnolia: var(--color-magnolia);          /* #f6f5ff */
  --surface-peach: var(--color-pearl);                /* #fdf1ec */
  --surface-gray: var(--bg-soft-gray);                /* #f5f5f5 */
  --surface-night: #151a26;                           /* тёмный фон hero/подвала: чёрный с синим оттенком (лендинги) */

  /* линии и плашки */
  --line: var(--main-white-gray);                     /* #dedede */
  --line-soft: var(--border-color-border);            /* #cfdbe9 */
  --promo-lavender: var(--color-pink);                /* #BBB2FF */
  --scrim: rgba(0,0,0,.5);

  /* семантика */
  --success: var(--main-green);                       /* #1c993f */
  --warning: var(--main-yellow);
  --error: var(--main-color-red);                     /* #fb3d01 */

  /* типографика (desktop; mobile ниже) */
  --font-sans: "SFT Schrifted Sans", Arial, Helvetica, sans-serif;
  --fs-h1: 56px;   --lh-h1: 118%;
  --fs-h2: 34px;   --lh-h2: 125%;
  --fs-h3: 26px;   --lh-h3: 125%;
  --fs-h4: 22px;   --lh-h4: 125%;
  --fs-h5: 18px;   --lh-h5: 160%;
  --fs-body: 18px; --lh-body: 165%;
  --fs-xl: 24px;   --lh-xl: 140%;
  --fs-med: 18px;  --lh-med: 160%;
  --fs-norm: 14px; --lh-norm: 120%;
  --fs-mini: 12px; --lh-mini: 120%;
  --fs-badge: 16px;--lh-badge: 120%;

  /* форма */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  /* тени --shadow-small / --shadow-medium / --shadow-big / --shadow-orange — из палитры сайта */

  /* сетка. Брейкпоинты (справочно, в переменных не работают): 640 / 768 / 1024 / 1280 / 1366 */
  --container: var(--container-md);                   /* 1138px */
  --container-narrow: 640px;                          /* лендинги в одну колонку */
  --container-pad: 16px;
}

@media (max-width: 640px){
  :root{
    --fs-h1: 24px;   --lh-h1: 125%;
    --fs-h2: 22px;   --lh-h2: 125%;
    --fs-h3: 20px;   --lh-h3: 125%;
    --fs-h4: 18px;   --lh-h4: 120%;
    --fs-h5: 16px;   --lh-h5: 150%;
    --fs-body: 16px; --lh-body: 150%;
    --fs-xl: 18px;   --lh-xl: 140%;
    --fs-med: 14px;  --lh-med: 160%;
    --fs-norm: 12px; --lh-norm: 120%;
    --fs-mini: 10px; --lh-mini: 120%;
  }
}