/* J.O.Y — токены стиля «Закат» (v11-sunset, утверждён 07.10.2026).
   Цвета перенесены 1 в 1 из 13. J.O.Y — Прототип/design/variants/v11-sunset/index.html.
   Новые токены (помечены «новое») — только там, где v11 не хватало для экранов MVP.
   Тема: атрибут data-theme="light|dark" на <html> (в Mini App — из Telegram.WebApp.colorScheme). */

/* Шрифтовая пара бренда (сайт joy-consulting.ru и бот): Tenor Sans — заголовки, Lato — текст.
   Файлы лежат в ../assets/fonts/ (Lato 2.0 OFL с кириллицей, сабсет Latin+Cyrillic; Tenor Sans с Google Fonts, OFL).
   Замена Rubik — по замечанию Русика 23.10.2026: «дефолтные шрифты выдают Клода». */
@font-face { font-family: "JOY Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/Lato-Regular.woff2") format("woff2"); }
@font-face { font-family: "JOY Lato"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/Lato-Medium.woff2") format("woff2"); }
@font-face { font-family: "JOY Lato"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/Lato-Semibold.woff2") format("woff2"); }
@font-face { font-family: "JOY Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/Lato-Bold.woff2") format("woff2"); }
@font-face { font-family: "JOY Lato"; font-weight: 400; font-style: italic; font-display: swap; src: url("assets/fonts/Lato-Italic.woff2") format("woff2"); }
@font-face { font-family: "JOY Tenor"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/TenorSans-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JOY Tenor"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/TenorSans-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JOY Tenor"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/TenorSans-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; }

/* новое 23.10 (правки v3, С1): рукописная строка логотипа «just open yourself» — Alex Brush (Google Fonts, OFL 1.1), только латиница, файл в assets/fonts */
@font-face { font-family: "JOY Script"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/AlexBrush-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
  /* ── Типографика: 5 кеглей ── */
  --font: "JOY Lato", Lato, system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "JOY Tenor", "Tenor Sans", "JOY Lato", Lato, system-ui, sans-serif; /* заголовки */
  --font-script: "JOY Script", "Alex Brush", "Snell Roundhand", cursive;                /* новое 23.10: только подпись логотипа */
  --fs-1: 12px;  --lh-1: 16px;   /* надписи капсом, таб-бар, сноски */
  --fs-2: 14px;  --lh-2: 20px;   /* вторичный текст, подсказки */
  --fs-3: 16px;  --lh-3: 24px;   /* основной текст, кнопки */
  --fs-4: 18px;  --lh-4: 24px;   /* заголовки карточек */
  --fs-5: 30px;  --lh-5: 36px;   /* приветствие на сцене */
  --fs-l: 24px;  --lh-l: 30px;   /* новое 20.10: заголовок блока лендинга (h.section({…})) */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --caps-track: .08em;

  /* ── Радиусы: 3 ── */
  --r-1: 24px;      /* карточки, плитки */
  --r-2: 32px;      /* лист */
  --r-pill: 999px;  /* кнопки, чипы, бейджи */

  /* ── Отступы: сетка 8 (4 — полушаг) ── */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --gutter: 16px;          /* поля листа */
  --tap: 44px;             /* минимум тач-цели */
  --btn-h: 48px; --btn-h-lg: 56px;

  /* ── Каркас экрана (новое) ── */
  --status-h: 47px;        /* системная строка; в Telegram fullscreen — var(--tg-safe-area-inset-top) + var(--tg-content-safe-area-inset-top) */
  --home-h: 34px;          /* полоска «домой» iOS; в Telegram — var(--tg-safe-area-inset-bottom) */
  --tab-h: 56px;
  --sheet-overlap: 28px;   /* насколько лист заходит на сцену */

  /* ── Цвет: светлая (v11) ── */
  --bg: #FFF7EC; --surface: #FFFFFF; --field: #FFF7EC;
  --ink: #1F1B5A; --ink-2: #5A5684; --ink-3: #6E6A99;
  --accent: #F26A1B; --accent-ink: #B9490C;
  --primary: #4B3FD6; --on-primary: #FFFFFF; --primary-soft: #EFEDFF; --on-primary-soft: #4B3FD6;
  --sun: #FFD15C; --on-sun: #1F1B5A; --sun-deco-1: #FF8A3D; --sun-deco-2: #FFB23E;
  --rose: #FFC9D6; --on-rose: #1F1B5A;
  --line: rgba(31,27,90,.10); --card-border: transparent;
  --track: #FFE3C4; --fill-a: #FFD15C; --fill-b: #FF8A3D;
  --success: #1F7A50; --danger: #C2362B;
  --on-scene: #FFFFFF; --on-scene-2: rgba(255,255,255,.88); --scrim: rgba(20,12,60,.34); --scrim-line: rgba(255,255,255,.55);
  --nav-bg: #FFFFFF; --nav-ink: #6E6A99; --nav-active: #B9490C; --nav-active-ic: #F26A1B;
  --sky-1: #29277F; --sky-2: #4B3FD6; --sky-3: #A95AB6; --sky-4: #FF9466;
  --hill-1: #3A2F9E; --hill-2: #2A2278; --date: #FFC59E; --spark: #FFE7A3; --star: #FFFFFF;
  --sh-1: 0 8px 24px rgba(43,42,140,.08); --sh-2: 0 8px 16px rgba(75,63,214,.30);

  /* новое: приглушённые плитки «откроется позже», мягкий успех для бейджа, подложка дока */
  --sun-muted: #FFEFC2; --rose-muted: #FFE4EB; --tile-deco-muted: #FFD9A8;
  --success-soft: #E2F3EA;
  --dock-bg: rgba(255,247,236,.94);
  --stage: #E7E4EF; --stage-ink: #57537F;
  /* новое 20.10: текст на солнечном градиенте --fill-a → --fill-b (номера шагов, аватар отзыва) — тёмно-синий в обеих темах */
  --on-fill: #1F1B5A;

  /* бегунок шкалы — солнце (v11) */
  --thumb-sun: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2238%25%22%20cy%3D%2232%25%22%20r%3D%2278%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FFE39A%22/%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23FFBE55%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23FF8F3F%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2222%22%20fill%3D%22%23FFFFFF%22/%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2217%22%20fill%3D%22url%28%23g%29%22/%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%238C3B12%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M13.8%2020.6q2%202%204%200M26.2%2020.6q2%202%204%200%22/%3E%3Cpath%20d%3D%22M18.9%2026q3.1%202.6%206.2%200%22/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Цвет: тёмная (v11) ── */
[data-theme="dark"] {
  --bg: #1A1740; --surface: #2A2661; --field: #1F1B4C;
  --ink: #F5F2FF; --ink-2: #C3BFE8; --ink-3: #B9B5E2; /* QA 23.10: ink-3 светлее для контраста ≥ 4,5 на тонах */
  --accent: #FF8A3D; --accent-ink: #FFA466;
  --primary: #5B4EE6; --on-primary: #FFFFFF; --primary-soft: #332D73; --on-primary-soft: #D9D4FF;
  --sun: #4A381A; --on-sun: #FFE3A3; --sun-deco-1: #6E4620; --sun-deco-2: #5E431D;
  --rose: #43263F; --on-rose: #FFD3DF;
  --line: rgba(255,255,255,.10); --card-border: rgba(255,255,255,.10);
  --track: #332E6B; --fill-a: #C9A04A; --fill-b: #D9773A;
  --success: #5FC79A; --danger: #FF8A80;
  --scrim: rgba(6,5,24,.40); --scrim-line: rgba(255,255,255,.50);
  --nav-bg: #15123A; --nav-ink: #A39FD0; --nav-active: #FFA466; --nav-active-ic: #FF9A55;
  --sky-1: #07061C; --sky-2: #141146; --sky-3: #2A2163; --sky-4: #4A2D62;
  --hill-1: #221D5A; --hill-2: #1E1A4E; --date: #FFB27A; --spark: #CFC6FF; --star: #E8E2FF;
  --sh-1: none; --sh-2: 0 8px 24px rgba(91,78,230,.38);

  --sun-muted: #352B2A; --rose-muted: #33223D; --tile-deco-muted: #45313A;
  --success-soft: rgba(95,199,154,.14);
  --dock-bg: rgba(26,23,64,.94);
  --stage: #0F0D28; --stage-ink: #A39FD0;

  --thumb-sun: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2244%22%20height%3D%2244%22%20viewBox%3D%220%200%2044%2044%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%2238%25%22%20cy%3D%2232%25%22%20r%3D%2280%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23FBF4DC%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23D8C99C%22/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2222%22%20fill%3D%22%233A3480%22/%3E%3Ccircle%20cx%3D%2222%22%20cy%3D%2222%22%20r%3D%2217%22%20fill%3D%22url%28%23g%29%22/%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%236A5A34%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M13.8%2021.3q2%201.7%204%200M26.2%2021.3q2%201.7%204%200%22/%3E%3Cpath%20d%3D%22M19.6%2026.2q2.4%201.7%204.8%200%22/%3E%3C/g%3E%3C/svg%3E");
}

/* ═════════ новое 22.10 — дизайн-проход «ритм ленты»: тона секций, цветные карточки, акценты ═════════
   Тон секции: --t-<тон>-a (верх, цвет волны над секцией) · --t-<тон>-b (низ) · --t-<тон>-g1/g2 (мягкие пятна-подсветки).
   Текст на тоне проверен ≥ 4,5:1 (таблица в README, раздел «Дизайн-проход 22.10»). Хелперы: h.section({tone, wave}), h.divider, h.band. */
:root {
  --fs-xl: 28px; --lh-xl: 34px;       /* заголовок тонированной секции и плашки */
  --wave-h: 28px;                     /* высота волны-разделителя */
  --band-pad: 40px;                   /* вертикальный отступ внутри тонированной секции */

  --t-cream-a: #FFF7EC;    --t-cream-b: #FFF7EC;    --t-cream-g1: rgba(255,209,92,.22);  --t-cream-g2: rgba(255,201,214,.26);
  --t-lavender-a: #F0ECFF; --t-lavender-b: #E6E0FF; --t-lavender-g1: rgba(123,108,255,.20); --t-lavender-g2: rgba(255,170,130,.24);
  --t-peach-a: #FFEADB;    --t-peach-b: #FFDCC4;    --t-peach-g1: rgba(255,138,61,.20);  --t-peach-g2: rgba(255,170,195,.34);
  --t-mint-a: #E3F7EE;     --t-mint-b: #D2F1E3;     --t-mint-g1: rgba(63,184,132,.20);   --t-mint-g2: rgba(255,209,92,.28);
  --t-sky-a: #BFE2FF;      --t-sky-b: #EAF5FF;      --t-sky-g1: rgba(255,255,255,.70);   --t-sky-g2: rgba(255,209,92,.40);
  --t-sunset-a: #2F2896;   --t-sunset-m: #6634A8;   --t-sunset-m2: #A53C86; --t-sunset-b: #B8466E; --t-sunset-g1: rgba(255,178,62,.55); --t-sunset-g2: rgba(255,138,61,.40);
  --t-night-a: #1F1B5A;    --t-night-b: #29277F;    --t-night-g1: rgba(123,108,255,.38); --t-night-g2: rgba(255,178,62,.14);

  /* текст на тонах: светлые тона — тёмно-синий, тёмные (sunset/night) — белый */
  --t-ink-light: #1F1B5A; --t-ink2-light: #5A5684;
  --t-ink-dark: #FFFFFF;  --t-ink2-dark: #F3EEFF; --t-eyebrow-dark: #FFD9B8;
  --t-sky-ink2: #4A4A80;

  /* акценты заголовков секций (eyebrow, номер, полоска): фон кружка · текст на кружке · текст надписи на светлом тоне */
  --acc-orange: #F26A1B; --acc-orange-on: #FFFFFF; --acc-orange-ink: #A8400A;
  --acc-violet: #4B3FD6; --acc-violet-on: #FFFFFF; --acc-violet-ink: #4B3FD6;
  --acc-mint: #1F9D6A;   --acc-mint-on: #FFFFFF;   --acc-mint-ink: #17694A;
  --acc-sky: #2F7BE0;    --acc-sky-on: #FFFFFF;    --acc-sky-ink: #1A56A6;
  --acc-rose: #E0457B;   --acc-rose-on: #FFFFFF;   --acc-rose-ink: #A82B5A;
  --acc-sun: #FFC23D;    --acc-sun-on: #1F1B5A;    --acc-sun-ink: #8A5A00;

  /* цветные карточки: фон · кружок иконки · иконка */
  --card-peach: #FFE3CF;    --card-peach-ic: #F26A1B;    --card-peach-ic-on: #FFFFFF;
  --card-lavender: #ECE8FF; --card-lavender-ic: #4B3FD6; --card-lavender-ic-on: #FFFFFF;
  --card-mint: #DDF4E9;     --card-mint-ic: #1F9D6A;     --card-mint-ic-on: #FFFFFF;
  --card-sun: #FFF0BF;      --card-sun-ic: #FFC23D;      --card-sun-ic-on: #1F1B5A;
  --card-sky: #E1F0FF;      --card-sky-ic: #2F7BE0;      --card-sky-ic-on: #FFFFFF;
  --glass: rgba(255,255,255,.12); --glass-line: rgba(255,255,255,.22);
  --cloud: #FFFFFF;
}
[data-theme="dark"] {
  /* тёмная: ступени индиго с цветными подсветками; текст #F5F2FF / #C9C5EA */
  --t-cream-a: #1A1740;    --t-cream-b: #1A1740;    --t-cream-g1: rgba(255,178,62,.08);  --t-cream-g2: rgba(123,108,255,.10);
  --t-lavender-a: #262063; --t-lavender-b: #2B2470; --t-lavender-g1: rgba(123,108,255,.34); --t-lavender-g2: rgba(255,138,61,.14);
  --t-peach-a: #30203F;    --t-peach-b: #3A2246;    --t-peach-g1: rgba(255,138,61,.26);  --t-peach-g2: rgba(255,120,160,.18);
  --t-mint-a: #152F45;     --t-mint-b: #163A48;     --t-mint-g1: rgba(95,199,154,.26);   --t-mint-g2: rgba(123,108,255,.16);
  --t-sky-a: #1B2A66;      --t-sky-b: #22337A;      --t-sky-g1: rgba(156,203,255,.16);   --t-sky-g2: rgba(255,209,92,.14);
  --t-sunset-a: #2A1F66;   --t-sunset-m: #3F2470;   --t-sunset-m2: #55286E; --t-sunset-b: #7A2F5A; --t-sunset-g1: rgba(255,164,102,.36); --t-sunset-g2: rgba(255,120,90,.26);
  --t-night-a: #0B0A22;    --t-night-b: #15124A;    --t-night-g1: rgba(123,108,255,.30); --t-night-g2: rgba(255,178,62,.10);

  --t-ink-light: #F5F2FF; --t-ink2-light: #C9C5EA;
  --t-ink-dark: #FFFFFF;  --t-ink2-dark: #E3DDFB; --t-eyebrow-dark: #FFC59E;
  --t-sky-ink2: #C9C5EA;

  --acc-orange: #FF8A3D; --acc-orange-on: #1F1B5A; --acc-orange-ink: #FFA466;
  --acc-violet: #7B6CFF; --acc-violet-on: #FFFFFF; --acc-violet-ink: #B8AEFF;
  --acc-mint: #3FB884;   --acc-mint-on: #0F1F2A;   --acc-mint-ink: #6FD8A8;
  --acc-sky: #5AA2FF;    --acc-sky-on: #0F1A3A;    --acc-sky-ink: #9CCBFF;
  --acc-rose: #FF6F9C;   --acc-rose-on: #2A0F1F;   --acc-rose-ink: #FFA3C0;
  --acc-sun: #E0A53A;    --acc-sun-on: #1F1B5A;    --acc-sun-ink: #FFD27A;

  --card-peach: #3A2440;    --card-peach-ic: #FF8A3D;    --card-peach-ic-on: #1F1B5A;
  --card-lavender: #2F2A72; --card-lavender-ic: #7B6CFF; --card-lavender-ic-on: #FFFFFF;
  --card-mint: #183A44;     --card-mint-ic: #3FB884;     --card-mint-ic-on: #0F1F2A;
  --card-sun: #3B3020;      --card-sun-ic: #E0A53A;      --card-sun-ic-on: #1F1B5A;
  --card-sky: #1F2E6E;      --card-sky-ic: #5AA2FF;      --card-sky-ic-on: #0F1A3A;
  --glass: rgba(255,255,255,.08); --glass-line: rgba(255,255,255,.16);
  --cloud: rgba(255,255,255,.10);
}

/* ═════════ новое 23.10 (правки v3): логотип, руки персонажа, эмоции шкалы, навигация по разделу, облака, медиа ═════════ */
:root {
  --logo-on-sky: #FFFFFF;            /* логотип на небе (h.logo tone: 'light') */
  /* логотип на светлом листе (tone: dark) — var(--ink): индиго, в тёмной теме светлый (задаётся в .joy-logo, чтобы работал и data-theme на секции) */
  --feednav-bg: rgba(255,247,236,.86); --feednav-line: rgba(31,27,90,.10);
  --feednav-chip: #FFFFFF; --feednav-chip-ink: #5A5684; --feednav-on: #4B3FD6; --feednav-on-ink: #FFFFFF;
  --media-chrome: #F3EFE8; --media-shot: #EDE8F7; --media-shot-ink: #6E6A99; --media-outlet: #1F1B5A; --media-outlet-ink: #FFFFFF;
  --mood-calm: #1F9D6A; --mood-think: #2F7BE0; --mood-sad: #B9490C; --mood-cry: #C2362B;
  --ba-track: #FFE3C4; --ba-was: #E0457B; --ba-now: #1F9D6A;
  --floater: rgba(255,255,255,.75); --floater-warm: rgba(255,178,62,.55);
  --tear: #7CC4FF;
}
[data-theme="dark"] {
  --feednav-bg: rgba(26,23,64,.86); --feednav-line: rgba(255,255,255,.12);
  --feednav-chip: #2A2661; --feednav-chip-ink: #C9C5EA; --feednav-on: #FF8A3D; --feednav-on-ink: #1F1B5A;
  --media-chrome: #221E55; --media-shot: #2F2A72; --media-shot-ink: #B7B3DD; --media-outlet: #F5F2FF; --media-outlet-ink: #1F1B5A;
  --mood-calm: #6FD8A8; --mood-think: #9CCBFF; --mood-sad: #FFA466; --mood-cry: #FF8A80;
  --ba-track: #332E6B; --ba-was: #FF6F9C; --ba-now: #6FD8A8;
  --floater: rgba(232,226,255,.55); --floater-warm: rgba(255,178,62,.35);
  --tear: #9CCBFF;
}