/* tokens.css — Gravity, студия флай-йоги (gravity-yoga). Автор: дизайнер kz10.
   Имена переменных = договор стартового набора (kz10/_shared/starter/README.md).
   Идея: гравитация = вес шрифта; мотив = провис гамака (одна фигура на всю страницу). Подробно: ../03-design.md */

/* Roboto Flex, переменный: оси wght 100–1000, wdth 25–151, opsz 8–144. Кириллица, казахские буквы и ₸ есть. */
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:100 1000;font-display:swap;src:url(fonts/roboto-flex-cyrillic-ext.woff2) format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:100 1000;font-display:swap;src:url(fonts/roboto-flex-cyrillic.woff2) format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:100 1000;font-display:swap;src:url(fonts/roboto-flex-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Roboto Flex";font-style:normal;font-weight:100 1000;font-display:swap;src:url(fonts/roboto-flex-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  /* палитра снята с фото студии: бирюза гамаков, малиновый коврик, белые стены */
  --bg: #F4F5F4;            /* белая стена зала, нейтральная (не «крем») */
  --surface: #E5EAE9;       /* шаг тона: поля ввода, плашки, слоты */
  --ink: #0C2427;           /* глубокая бирюза-почти-чёрный, 14.8:1 на --bg */
  --muted: #4B5E60;         /* второстепенное, 6.3:1 на --bg */
  --accent: #0F6E73;        /* кнопка действия (тёмная ткань), белый текст 6.0:1 */
  --accent-ink: #FFFFFF;
  --btn-hover: #0C2427;  --btn-hover-ink: #FFFFFF;

  --field-1: #0E4A4E;  --field-1-ink: #EAF4F3;  --field-1-muted: #A9C4C3;   /* глубокая ткань: «Соберите неделю», финал. 8.9:1 и 5.4:1 */
  --field-2: #BEE5E2;  --field-2-ink: #0C2427;  --field-2-muted: #33504F;   /* ткань на свету: «Как это работает», правила. 11.9:1 и 6.5:1 */
  --field-3: #F5CEDF;  --field-3-ink: #0C2427;  --field-3-muted: #5A3A4A;   /* розовый коврик: сертификат. 11.4:1 и 6.9:1 */

  /* цвета рисунков и мотива (не для текста) */
  --sling: #1F9AA0;         /* ткань гамака на свету: полоса героя, слоты, рисунки. Чернила на ней 4.8:1 (только крупный текст) */
  --sling-shade: #13777C;   /* ткань в тени: внутренняя сторона гамака на рисунках */
  --mat: #DD3A96;           /* малиновый коврик: одна деталь на рисунках (одежда фигуры), не кнопки и не текст */

  /* шрифт: одна гарнитура на всё */
  --font-display: "Roboto Flex", "Arial Narrow", Arial, sans-serif;
  --font-text: "Roboto Flex", Arial, sans-serif;
  --fv-monument: "wght" 1000, "wdth" 151;   /* GRAVITY в покое: самый тяжёлый и широкий */
  --fv-float: "wght" 160, "wdth" 25;        /* GRAVITY в невесомости (конец подписи-приёма, финал страницы) */
  --fv-head: "wght" 820, "wdth" 100;        /* заголовки разделов и H1 */
  --fv-num: "wght" 760, "wdth" 112;         /* крупные цены */
  --fv-light: "wght" 230, "wdth" 100;       /* заголовок финала «невесомость» */
  --fv-text: "wght" 400, "wdth" 100;
  --fv-strong: "wght" 620, "wdth" 100;      /* названия в списках, кнопки */

  /* шкала: ровно 5 размеров */
  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);   /* 14–15 */
  --step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);      /* 17–19 */
  --step-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem);     /* 19–24 */
  --step-head: clamp(2.125rem, 0.9rem + 4.1vw, 4.75rem);       /* 34–76: H1, заголовки разделов, цены */
  --step-display: clamp(3.5rem, 0.2rem + 15.4vw, 14rem);       /* 60–224: слово GRAVITY, если набрано в HTML (в SVG-полосе размер задан в единицах viewBox) */

  /* сетка и ритм */
  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(4.5rem, 11vw, 11rem);
  --radius: 999px;          /* ОДНА форма кнопки и чипов: таблетка. Фото и плашки — прямые углы + провис снизу */
  --header-h: 4.5rem;

  /* мотив «провис гамака»: глубина провиса в px; маски считаются от неё */
  --sag: clamp(1.75rem, 0.9rem + 3.4vw, 3.5rem);   /* 28 px на телефоне … 56 px на 1440 */
  --clip-sag: polygon(0 0, 100% 0, 100% calc(100% - var(--sag) * 1.000), 95% calc(100% - var(--sag) * 0.810), 90% calc(100% - var(--sag) * 0.640), 85% calc(100% - var(--sag) * 0.490), 80% calc(100% - var(--sag) * 0.360), 75% calc(100% - var(--sag) * 0.250), 70% calc(100% - var(--sag) * 0.160), 65% calc(100% - var(--sag) * 0.090), 60% calc(100% - var(--sag) * 0.040), 55% calc(100% - var(--sag) * 0.010), 50% 100%, 45% calc(100% - var(--sag) * 0.010), 40% calc(100% - var(--sag) * 0.040), 35% calc(100% - var(--sag) * 0.090), 30% calc(100% - var(--sag) * 0.160), 25% calc(100% - var(--sag) * 0.250), 20% calc(100% - var(--sag) * 0.360), 15% calc(100% - var(--sag) * 0.490), 10% calc(100% - var(--sag) * 0.640), 5% calc(100% - var(--sag) * 0.810), 0% calc(100% - var(--sag) * 1.000));
  --clip-sag-top: polygon(0% 0, 5% calc(var(--sag) * 0.190), 10% calc(var(--sag) * 0.360), 15% calc(var(--sag) * 0.510), 20% calc(var(--sag) * 0.640), 25% calc(var(--sag) * 0.750), 30% calc(var(--sag) * 0.840), 35% calc(var(--sag) * 0.910), 40% calc(var(--sag) * 0.960), 45% calc(var(--sag) * 0.990), 50% calc(var(--sag) * 1.000), 55% calc(var(--sag) * 0.990), 60% calc(var(--sag) * 0.960), 65% calc(var(--sag) * 0.910), 70% calc(var(--sag) * 0.840), 75% calc(var(--sag) * 0.750), 80% calc(var(--sag) * 0.640), 85% calc(var(--sag) * 0.510), 90% calc(var(--sag) * 0.360), 95% calc(var(--sag) * 0.190), 100% 0, 100% 100%, 0 100%);

  /* движение (как в стартовом наборе) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;  --t-hover: 180ms;  --t-ui: 240ms;  --t-reveal: 800ms;
}

/* Помощники мотива (верстальщик может перенести в style.css) */
.sag { clip-path: var(--clip-sag); }              /* фото «висит» как ткань: прямой верх, провисший низ */
.sag-top { clip-path: var(--clip-sag-top); }      /* цветное поле, у которого верхний край провисает (полоса героя, раздел-лента) */