/* Юля — стиль — generated from tokens.json */
:root, [data-theme="dark"] {
  --surface: #24201c;
  --surface-raised: #2e2924;
  --surface-deep: #1a1714;
  --ink: #f6f1ea;
  --ink-muted: #c9bda8;
  --chalk: #ede4d3;
  --gold-light: #fff3d1;
  --gold: #ffd866;
  --gold-deep: #ffc21a;
  --gold-text: #ffd866;
  --marker: #ffd86659;
  --on-gold: #1e1b18;
  --focus-ring: #ffd866;
  --tomato: #f08a72;
  --peach: #f7ae86;
  --ochre: #f2be62;
  --olive: #bdbe6e;
  --sage: #9ccb98;
  --mint: #86ddbb;
  --cinnamon: #d9a07a;
  --wine: #e07d8c;
  --lilac: #c3aeea;
  --tomato-soft: #51372f;
  --peach-soft: #523f33;
  --ochre-soft: #51432b;
  --olive-soft: #46432e;
  --sage-soft: #3e4637;
  --mint-soft: #3a4a3f;
  --cinnamon-soft: #4c3c31;
  --wine-soft: #4d3435;
  --lilac-soft: #473f49;
  --good: var(--mint);
  --bad: var(--tomato);
}
[data-theme="light"] {
  --surface: #efe9df;
  --surface-raised: #f7f2ea;
  --surface-deep: #e4dccf;
  --ink: #1e1b18;
  --ink-muted: #5e554b;
  --gold-text: #8a5a00;
  --marker: #ffd866b3;
  --focus-ring: #8a5a00;
  --tomato: #b23f2a;
  --peach: #a9512a;
  --ochre: #8c5a0e;
  --olive: #5c5e22;
  --sage: #3b7240;
  --mint: #1d6e52;
  --cinnamon: #7e4626;
  --wine: #8e1f2c;
  --lilac: #6a4ca6;
  --tomato-soft: #efcbbc;
  --peach-soft: #f2d6c3;
  --ochre-soft: #f0dbb7;
  --olive-soft: #dfdbbb;
  --sage-soft: #d4dfc8;
  --mint-soft: #cde5d3;
  --cinnamon-soft: #e8d2bf;
  --wine-soft: #eac6c4;
  --lilac-soft: #e1d6e3;
  --good: var(--mint);
  --bad: var(--tomato);
}
:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --safe: 80px;
  --space-7: 120px;
  --radius-none: 0px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --carousel-width: 1080px;
  --carousel-height: 1350px;
  --reel-width: 1080px;
  --reel-height: 1920px;
  --reel-text-left: 120px;
  --reel-text-right: 890px;
  --reel-text-top: 290px;
  --reel-text-bottom: 1250px;
  --font-head: "Oswald", "Arial Narrow", sans-serif;
  --font-hand: "Neucha", "Comic Sans MS", cursive;
  --font-text: "Montserrat", system-ui, sans-serif;
  --font-num: "Pangolin", "Neucha", cursive;
  --font-serif: "Cormorant Garamond", Georgia, serif;
}
.hook-hand { font-family: var(--font-hand); font-size: 72px; line-height: 1.0; font-weight: 400; }
.hook-caps { font-family: var(--font-head); font-size: 168px; line-height: 0.92; font-weight: 700; }
.title { font-family: var(--font-head); font-size: 104px; line-height: 0.95; font-weight: 700; }
.title-s { font-family: var(--font-head); font-size: 64px; line-height: 1.0; font-weight: 600; }
.hand { font-family: var(--font-hand); font-size: 56px; line-height: 1.1; font-weight: 400; }
.quote { font-family: var(--font-hand); font-size: 84px; line-height: 1.1; font-weight: 400; }
.body { font-family: var(--font-text); font-size: 40px; line-height: 1.35; font-weight: 500; }
.caption { font-family: var(--font-text); font-size: 30px; line-height: 1.3; font-weight: 600; }
.kicker { font-family: var(--font-text); font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: 0.12em; }
.number { font-family: var(--font-num); font-size: 180px; line-height: 0.9; font-weight: 400; }
.reel-hook-caps { font-family: var(--font-head); font-size: 168px; line-height: 0.92; font-weight: 700; }
.reel-hook-hand { font-family: var(--font-hand); font-size: 80px; line-height: 1.0; font-weight: 400; }
.reel-sub-caps { font-family: var(--font-head); font-size: 64px; line-height: 1.0; font-weight: 700; }
.reel-sub-hand { font-family: var(--font-hand); font-size: 54px; line-height: 1.05; font-weight: 400; }