/* ВкусВилл — generated from tokens.json. Не редактируйте вручную: правьте tokens.json и запустите tools/build-tokens.pl */

:root, [data-theme="light"] {
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f0faf4;
  --surface-tint: var(--green-20);
  --surface-warm: var(--peach-1);
  --ink: #333333;
  --ink-muted: #707070;
  --line: #e1e8e3;
  --line-strong: #8c8c8c;
  --brand: var(--green);
  --on-brand: #333333;
  --brand-text: #056b53;
  --accent: var(--berry);
  --on-accent: #ffffff;
  --danger-text: var(--berry);
  --highlight: var(--promo-yellow);
  --on-highlight: #333333;
  --focus-ring: #333333;
  --focus-halo: #ffffff;
  --white: #ffffff;
  --on-graphite: #f2f2f2;
  --green: #2dbe64;
  --green-80: #57cb83;
  --green-70: #6cd293;
  --green-60: #81d8a2;
  --green-50: #96dfb2;
  --green-40: #abe5c1;
  --green-30: #c0ecd1;
  --green-20: #d5f2e0;
  --berry: #d7144b;
  --graphite: #333333;
  --orange-1: #ffb369;
  --orange-2: #fc9a48;
  --orange-3: #f98026;
  --teal-1: #09b88f;
  --teal-2: #079271;
  --teal-3: #056b53;
  --coral-1: #ffaea8;
  --coral-2: #fa8b81;
  --coral-3: #f5675a;
  --blue-1: #54b3ff;
  --blue-2: #2f9bf2;
  --blue-3: #0982e5;
  --sand-1: #cdb191;
  --sand-2: #a0866c;
  --sand-3: #735c48;
  --violet-1: #9477e6;
  --violet-2: #764db4;
  --violet-3: #572382;
  --rose-1: #ca857f;
  --rose-2: #9f5c4e;
  --rose-3: #73331e;
  --plum-1: #cf7ea5;
  --plum-2: #a04975;
  --plum-3: #721445;
  --peach-1: #fff2db;
  --peach-2: #ffe3c3;
  --peach-3: #ffd5ab;
  --mint-1: #bdf4dd;
  --mint-2: #92e3c6;
  --mint-3: #66d3af;
  --pink-1: #fce6e6;
  --pink-2: #fed7d7;
  --pink-3: #ffc7c7;
  --sky-1: #cce9ff;
  --sky-2: #a6d5ff;
  --sky-3: #80c1ff;
  --linen-1: #f0e4d5;
  --linen-2: #e7d8c6;
  --linen-3: #ddcbb7;
  --lavender-1: #e1d9ff;
  --lavender-2: #d4c6ff;
  --lavender-3: #c8b3ff;
  --blush-1: #f7dad2;
  --blush-2: #efc6c0;
  --blush-3: #e6b2ad;
  --candy-1: #ffd9ed;
  --candy-2: #ffc6e2;
  --candy-3: #ffb3d6;
  --promo-yellow: #ffd508;
  --loyalty-orange: #fa5f0a;
  --loyalty-lime: #9ae894;
  --loyalty-blue: var(--blue-1);
  --loyalty-red: #ff3c3c;
  --skin-light: #ffb49b;
  --skin-tan: #ffa587;
  --product-lime: #a5f04b;
  --product-forest: #1e640f;
  --product-yellow: #ffcd00;
  --product-leaf: #19a019;
  --product-red: #ff3737;
  --product-crimson: #d21e19;
  --shadow-pop: 0 12px 32px rgba(51, 51, 51, 0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme-lock]) {
    --surface: #262626;
    --surface-raised: #333333;
    --surface-sunken: #1e1e1e;
    --surface-tint: #24382b;
    --surface-warm: #33302b;
    --ink: #f2f2f2;
    --ink-muted: #b0b0b0;
    --line: #474747;
    --on-brand: #262626;
    --brand-text: #2dbe64;
    --danger-text: #ff7a96;
    --on-highlight: #262626;
    --focus-ring: #ffffff;
    --focus-halo: #262626;
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

[data-theme="dark"] {
  --surface: #262626;
  --surface-raised: #333333;
  --surface-sunken: #1e1e1e;
  --surface-tint: #24382b;
  --surface-warm: #33302b;
  --ink: #f2f2f2;
  --ink-muted: #b0b0b0;
  --line: #474747;
  --on-brand: #262626;
  --brand-text: #2dbe64;
  --danger-text: #ff7a96;
  --on-highlight: #262626;
  --focus-ring: #ffffff;
  --focus-halo: #262626;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

:root {
  --angle-bubble: 5deg;
  --angle-plate: 2deg;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-bubble: 18px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --font-accent: Villula, "Euclid Circular B", Arial, sans-serif;
  --font-text: "Euclid Circular B", Arial, sans-serif;
}

.vv-accent-xl {
  font-family: var(--font-accent);
  font-size: 72px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}
.vv-accent-l {
  font-family: var(--font-accent);
  font-size: 52px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}
.vv-accent-m {
  font-family: var(--font-accent);
  font-size: 36px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}
.vv-accent-s {
  font-family: var(--font-accent);
  font-size: 24px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0;
}
.vv-title-1 {
  font-family: var(--font-text);
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
}
.vv-title-2 {
  font-family: var(--font-text);
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
}
.vv-title-3 {
  font-family: var(--font-text);
  font-size: 20px;
  line-height: 26px;
  font-weight: 500;
}
.vv-lead {
  font-family: var(--font-text);
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
}
.vv-body {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.vv-body-s {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.vv-label {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
}
.vv-light {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
}