/*
 * Design System Tokens — WowVendor
 * Generated from Figma Variables (file: P6cIX4bYZRbWPcXtA2i2EQ)
 * Source of truth: design-system/figma-sync/project-manifest.md
 * Last sync: 2026-06-20
 *
 * Usage:
 *   <link rel="stylesheet" href="../../shared/tokens.css">
 *   Then use var(--color-gray-900), var(--spacing-16), etc.
 *
 * Single mode: Redesign. Тем больше нет — data-theme не используется.
 *
 */

/* ==========================================================================
   FONT — Inter (CDN Google + локальный fallback)
   --font-family-base ссылается на 'Inter'; без подключения браузер/рендер
   падал на системный sans → дрейф глифов в сверке. Один @font-face с
   упорядоченным src: сначала системный Inter (если установлен), затем Google
   Fonts CDN (основной источник), затем локальный файл — страховка на случай
   недоступности сети (офлайн/CI). Браузер берёт первый успешно загруженный;
   если Google не ответил — грузит shared/fonts/InterVariable.woff2.
   Вариативный (wght 100..900 → покрывает 400/500/600), latin.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local('Inter'),
       url('https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcviYwY.woff2') format('woff2'),
       url('fonts/InterVariable.woff2') format('woff2');
}

/* ==========================================================================
   COLORS (mode: Redesign)
   ========================================================================== */

:root {

  /* --- Border Radius --- */
  --radius-4:  4px;
  --radius-6:  6px;
  --radius-8:  8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-32: 32px;

  /* --- Spacing --- */
  --spacing-2:  2px; /* добавлен по решению пользователя (banner-benefits: гэп value↔label в Figma = 2px) */
  --spacing-4:  4px;
  --spacing-6:  6px;
  --spacing-8:  8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  /* 40 в исходной выгрузке переменных не было: в Figma отступ «текст → заголовок»
     (мобильная иерархия 7063:907, контент карточки 12934:19640) задан сырым
     числом, без привязки к переменной. Добавлен по согласованию, чтобы слой
     типографики не хардкодил значение. */
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-52: 52px;
  --spacing-60: 60px;
  --spacing-80: 80px;

  /* --- Gray Palette --- */
  --color-gray-0:   #ffffff;
  --color-gray-25:  #f6f6f8;
  --color-gray-50:  #e9ebed;
  --color-gray-100: #dde0e4;
  --color-gray-200: #bac1c9;
  --color-gray-300: #9ba4b0;
  --color-gray-400: #8791a1;
  --color-gray-500: #657181;
  --color-gray-600: #535d6a;
  --color-gray-700: #3d434c;
  --color-gray-800: #24282e;
  --color-gray-900: #121417;

  /* --- Accent (Blue) --- */
  --color-accent-25:  #f5f9ff;
  /* accent-50 в Figma под переменную не выведен: фон баннера Boosting is Safe
     (нода 570:13407) залит хардкодом #ebf5ff. Значение заполняет пробел шкалы
     между accent-25 и accent-100 и монотонно в неё ложится. */
  --color-accent-50:  #ebf5ff;
  --color-accent-100: #cce1ff;
  --color-accent-300: #006aeb;
  --color-accent-400: #0059de;
  --color-accent-600: #003e94;
  --color-accent-700: #00265c;

  /* --- Positive (Green) --- */
  --color-positive-25:  #eefbf2;
  --color-positive-50:  #c7f5d5;
  --color-positive-100: #a3f0be;
  --color-positive-200: #6bd18f;
  --color-positive-300: #2cba67;
  --color-positive-400: #00a352;
  --color-positive-500: #00803e;
  --color-positive-600: #006b32;

  /* --- Negative (Red) --- */
  --color-negative-25:  #fef6f6;
  --color-negative-50:  #fce4e4;
  --color-negative-100: #fbd5d5;
  --color-negative-200: #f8afaf;
  --color-negative-300: #f67e7e;
  --color-negative-400: #f55b5b;
  --color-negative-500: #db2424;
  --color-negative-600: #b51c1c;

  /* --- Information (Blue) --- */
  --color-information-25:  #f2f7ff;
  --color-information-50:  #e0edff;
  --color-information-100: #cce1ff;
  --color-information-200: #99c3ff;
  --color-information-300: #66a6ff;
  --color-information-400: #3d8eff;
  --color-information-500: #006aeb;
  --color-information-600: #0059d6;

  /* --- Warning (Orange) --- */
  --color-warning-25:  #fff6db;
  --color-warning-50:  #ffe8a3;
  --color-warning-100: #ffdd75;
  --color-warning-200: #ffb429;
  --color-warning-300: #f78f08;
  --color-warning-400: #e56b00;
  --color-warning-500: #c24a00;
  --color-warning-600: #a83200;

  /* --- Rating (заливка звёзд среднего рейтинга; в Figma не привязан к Variable,
         взят из вектора Independed Rate Star, rate=3) --- */
  --color-rating-mid: #85b129;

  /* --- Purple --- */
  --color-purple-25:  #f7f5fd;
  --color-purple-50:  #eee8fa;
  --color-purple-100: #e4dcf7;
  --color-purple-200: #cabaef;
  /* Насыщенный индиго — фон баннера Banner Benefits. В Figma не привязан к
     Variable (захардкожен bg-[#5140de]); заведён как токен по просьбе. */
  --color-purple-500: #5140de;

  /* --- Teal --- */
  --color-teal-25:  #e4f5f8;
  --color-teal-400: #03a48e;
  --color-teal-500: #0497a0;
  /* Глубокий бирюзовый — фон баннера Banner Countdown. В Figma не привязан к
     Variable (захардкожен bg-[#044960]); заведён как токен по просьбе. */
  --color-teal-700: #044960;

  /* --- Navy --- */
  /* Тёмно-синий — подложка плашки баннера Banner About Us (под растровым артом).
     В Figma не привязан к Variable (захардкожен bg-[#16263f]); заведён как токен
     по просьбе. */
  --color-navy-900: #16263f;

  /* --- Alpha Light (white overlay) --- */
  --color-alpha-light-12: rgba(255, 255, 255, 0.12);
  --color-alpha-light-24: rgba(255, 255, 255, 0.24);
  --color-alpha-light-44: rgba(255, 255, 255, 0.44);
  --color-alpha-light-76: rgba(255, 255, 255, 0.76);
  --color-alpha-light-84: rgba(255, 255, 255, 0.84);

  /* --- Alpha Dark (black overlay) --- */
  --color-alpha-dark-12: rgba(20, 20, 20, 0.12);
  --color-alpha-dark-24: rgba(20, 20, 20, 0.24);
  --color-alpha-dark-44: rgba(20, 20, 20, 0.44);
  --color-alpha-dark-76: rgba(20, 20, 20, 0.76);
  --color-alpha-dark-84: rgba(20, 20, 20, 0.84);

  /* --- Alpha Gray (кольцо hover/focus) ---
     В Figma захардкожен: slider-control Hover = 0 0 0 4px rgba(194,194,194,0.24). */
  --color-alpha-gray-24: rgba(194, 194, 194, 0.24);

  /* --- WoW Loot Quality --- */
  --color-loot-poor:      #c2c2c2;
  --color-loot-common:    #939393;
  --color-loot-uncommon:  #119400;
  --color-loot-rare:      #0070dd;
  --color-loot-epic:      #a048e5;
  --color-loot-legendary: #ff8000;
  --color-loot-artifact:  #c6a957;
  --color-loot-heirloom:  #31abc9;

  /* --- WoW Class Colors --- */
  --color-class-death-knight:      #b2313e;
  --color-class-death-knight-25:   #ffdcdc;
  --color-class-demon-hunter:      #943dc1;
  --color-class-demon-hunter-25:   #f7e8f7;
  --color-class-druid:             #ec8334;
  --color-class-druid-25:          #ffe9be;
  --color-class-evoker:            #439a85;
  --color-class-evoker-25:         #cef7f2;
  --color-class-hunter:            #91ad5f;
  --color-class-hunter-25:         #e4f0cb;
  --color-class-mage:              #6ec4e7;
  --color-class-mage-25:           #dbf0ff;
  --color-class-monk:              #5dd29a;
  --color-class-monk-25:           #e0ffe5;
  --color-class-paladin:           #e591b8;
  --color-class-paladin-25:        #ffeff6;
  --color-class-priest:            #ffffff;
  --color-class-priest-invert:     #9ba4b0;
  --color-class-rogue:             #eadb11;
  --color-class-rogue-25:          #fff8d3;
  --color-class-shaman:            #3370d7;
  --color-class-shaman-25:         #ecf6ff;
  --color-class-warlock:           #8788e6;
  --color-class-warlock-25:        #d7d6f6;
  --color-class-warrior:           #bf9e74;
  --color-class-warrior-25:        #f0e0d6;
}

/* ==========================================================================
   SOCIAL BRAND COLORS
   Фирменные цвета соцсетей. В Figma (Button Social 4785:10290) заливки
   захардкожены без привязки к переменным — заведены как токены, чтобы
   компоненты ссылались только на var(--...) (прецедент teal для badge).
   Тройка на каждый бренд = Interation Default / Hover & Focus / Active.
   Twitter (X) переменные не заводим: он использует --color-gray-900
   (default+active) и --color-gray-700 (hover). Instagram — градиент,
   см. секцию GRADIENT TOKENS ниже.
   ========================================================================== */

:root {
  --color-social-facebook:            #0866ff;
  --color-social-facebook-hover:      #3b86ff;
  --color-social-facebook-active:     #0058e6;

  --color-social-pinterest:           #e60023;
  --color-social-pinterest-hover:     #ff304f;
  --color-social-pinterest-active:    #cf1935;

  --color-social-youtube:             #ff0000;
  --color-social-youtube-hover:       #ff3f3f;
  --color-social-youtube-active:      #df0000;

  --color-social-discord:             #5c6bc0;
  --color-social-discord-hover:       #7f8cd5;
  --color-social-discord-active:      #5563b3;

  --color-social-twitter-old:         #1da1f2;
  --color-social-twitter-old-hover:   #48baff;
  --color-social-twitter-old-active:  #2491d3;
}

/* ==========================================================================
   GRADIENT TOKENS
   Градиенты, захардкоженные в Figma без привязки к переменным (стопы —
   сырые rgba). Заведены как токены, чтобы компоненты ссылались только на
   var(--...) (аналогично добавлению teal-цветов для badge).
   ========================================================================== */

:root {
  /* Image scrim — затемнение низа карточки-товара под бейджами (product-card,
     варианты Default/Timer). Figma: linear 180°, rgba(13,13,13,0)→(…,0.64). */
  --gradient-scrim-image: linear-gradient(180deg, rgba(13, 13, 13, 0) 0%, rgba(13, 13, 13, 0.64) 100%);

  /* Game scrim — затемнение низа карточки игры под названием и лейблом
     (game-link-item). Figma: linear 180°, rgba(20,20,20,0.01)→(…,0.88);
     плотнее, чем scrim товара, потому что поверх лежит белый текст. */
  --gradient-scrim-game: linear-gradient(180deg, rgba(20, 20, 20, 0.01) 0%, rgba(20, 20, 20, 0.88) 100%);

  /* Instagram (button-social). Radial-градиент со скошенной матрицей — CSS
     radial-gradient такую трансформацию не выражает, поэтому стопы отданы
     SVG-слоем в data-URI (background-image + background-size:100% 100%).

     Ручки градиента Figma хранит нормализованными по bbox ноды: экспорт для
     40×40 даёт matrix(3.908 -3.8125 3.5459 26.867 0 40), для 102×40 —
     matrix(9.9655 -3.8125 9.0421 26.867 0 40), для 87×32 —
     matrix(8.5 -3.05 7.7124 21.494 0 32). Все три — одна и та же матрица,
     умноженная на (W,H). Поэтому здесь gradientUnits по умолчанию
     (objectBoundingBox) и матрица, делённая на размер: токен сам тянется
     под любую ширину кнопки.

     А вот ПОЗИЦИИ стопов у квадратной кнопки и у кнопки с подписью в мастере
     разные (у 87×32 и 102×40 — одинаковые), т.е. градиент доавторен под
     Icon Only. Отсюда две тройки токенов: *-icon-* и *-label-*. */
  --gradient-social-instagram-icon: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,221,85)' offset='0'/><stop stop-color='rgb(255,153,74)' offset='0.17282'/><stop stop-color='rgb(255,118,68)' offset='0.25923'/><stop stop-color='rgb(255,84,62)' offset='0.34564'/><stop stop-color='rgb(241,77,89)' offset='0.50923'/><stop stop-color='rgb(228,70,117)' offset='0.67282'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
  --gradient-social-instagram-icon-hover: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,221,85)' offset='0.057292'/><stop stop-color='rgb(255,153,74)' offset='0.35937'/><stop stop-color='rgb(255,118,68)' offset='0.51042'/><stop stop-color='rgb(255,84,62)' offset='0.66146'/><stop stop-color='rgb(241,77,89)' offset='0.74609'/><stop stop-color='rgb(228,70,117)' offset='0.83073'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
  --gradient-social-instagram-icon-active: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,84,62)' offset='0'/><stop stop-color='rgb(241,77,89)' offset='0.25'/><stop stop-color='rgb(228,70,117)' offset='0.5'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");

  --gradient-social-instagram-label: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,221,85)' offset='0'/><stop stop-color='rgb(255,153,74)' offset='0.067561'/><stop stop-color='rgb(255,118,68)' offset='0.10134'/><stop stop-color='rgb(255,84,62)' offset='0.13512'/><stop stop-color='rgb(241,77,89)' offset='0.3396'/><stop stop-color='rgb(227,69,117)' offset='0.54407'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
  --gradient-social-instagram-label-hover: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,221,85)' offset='0'/><stop stop-color='rgb(255,153,74)' offset='0.16146'/><stop stop-color='rgb(255,118,68)' offset='0.24219'/><stop stop-color='rgb(255,84,62)' offset='0.32292'/><stop stop-color='rgb(241,77,89)' offset='0.59115'/><stop stop-color='rgb(227,69,117)' offset='0.85938'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
  --gradient-social-instagram-label-active: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1 1' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect width='1' height='1' fill='url(%23g)'/><defs><radialGradient id='g' cx='0' cy='0' r='10' gradientTransform='matrix(0.0977 -0.0953125 0.0886475 0.671675 0 1)'><stop stop-color='rgb(255,84,62)' offset='0'/><stop stop-color='rgb(241,77,89)' offset='0.15104'/><stop stop-color='rgb(227,69,117)' offset='0.30208'/><stop stop-color='rgb(200,55,171)' offset='1'/></radialGradient></defs></svg>");
}

/* ==========================================================================
   EFFECT TOKENS (shadows)
   Source: Figma Effect Styles
   Записан без параметра spread, чтобы значение подходило и для box-shadow,
   и для filter: drop-shadow(var(--shadow-4)).
   ========================================================================== */

:root {
  /* Shadow 4 — мягкая тень (offset 0/2, blur 4, #141414 @ 4%) */
  --shadow-4: 0 2px 4px rgba(20, 20, 20, 0.04);
  /* Shadow 12 — подъём (offset 0/4, blur 12, #141414 @ 12%); аватар в blockquote */
  --shadow-12: 0 4px 12px rgba(20, 20, 20, 0.12);
}

/* ==========================================================================
   TYPOGRAPHY TOKENS
   Source: Figma Text Styles (getLocalTextStylesAsync)
   Font: Inter — weight map: Regular=400, Medium=500, Semi Bold=600
   ========================================================================== */

:root {
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Display (Semi Bold / 600) --- */
  --text-display-48-size:        48px;
  --text-display-48-line-height: 48px;
  --text-display-48-weight:      600;

  --text-display-40-size:        40px;
  --text-display-40-line-height: 44px;
  --text-display-40-weight:      600;

  --text-display-36-size:        36px;
  --text-display-36-line-height: 40px;
  --text-display-36-weight:      600;

  --text-display-32-size:        32px;
  --text-display-32-line-height: 38px;
  --text-display-32-weight:      600;

  --text-display-28-size:        28px;
  --text-display-28-line-height: 34px;
  --text-display-28-weight:      600;

  --text-display-24-size:        24px;
  --text-display-24-line-height: 32px;
  --text-display-24-weight:      600;

  --text-display-22-size:        22px;
  --text-display-22-line-height: 28px;
  --text-display-22-weight:      600;

  --text-display-20-size:        20px;
  --text-display-20-line-height: 28px;
  --text-display-20-weight:      600;

  --text-display-18-size:        18px;
  --text-display-18-line-height: 24px;
  --text-display-18-weight:      600;

  --text-display-16-size:        16px;
  --text-display-16-line-height: 22px;
  --text-display-16-weight:      600;

  --text-display-14-size:        14px;
  --text-display-14-line-height: 20px;
  --text-display-14-weight:      600;

  --text-display-12-size:        12px;
  --text-display-12-line-height: 20px;
  --text-display-12-weight:      600;

  --text-display-12c-size:        12px;
  --text-display-12c-line-height: 16px; /* Compact variant */
  --text-display-12c-weight:      600;

  /* --- Body Regular (400) --- */
  --text-body-18-size:        18px;
  --text-body-18-line-height: 28px;
  --text-body-18-weight:      400;

  --text-body-16-size:        16px;
  --text-body-16-line-height: 24px;
  --text-body-16-weight:      400;

  --text-body-14-size:        14px;
  --text-body-14-line-height: 20px;
  --text-body-14-weight:      400;

  --text-body-12-size:        12px;
  --text-body-12-line-height: 16px;
  --text-body-12-weight:      400;

  /* --- Body Medium (500) --- */
  --text-body-18m-size:        18px;
  --text-body-18m-line-height: 28px;
  --text-body-18m-weight:      500;

  --text-body-16m-size:        16px;
  --text-body-16m-line-height: 24px;
  --text-body-16m-weight:      500;

  --text-body-14m-size:        14px;
  --text-body-14m-line-height: 20px;
  --text-body-14m-weight:      500;

  --text-body-12m-size:        12px;
  --text-body-12m-line-height: 16px;
  --text-body-12m-weight:      500;

  --text-body-11m-size:        11px;
  --text-body-11m-line-height: 12px;
  --text-body-11m-weight:      500;

  /* Подписи разрядов таймера (Days/Hr/Min/Sec). В Figma именованного стиля нет —
     сырой текст 8/8 Medium; заведён как токен по просьбе. */
  --text-body-8m-size:         8px;
  --text-body-8m-line-height:  8px;
  --text-body-8m-weight:       500;
}

/* ==========================================================================
   TYPOGRAPHY UTILITY CLASSES
   Mirrors Figma text style names for 1-to-1 usage in HTML
   ========================================================================== */

.text-display-48 { font-family: var(--font-family-base); font-size: var(--text-display-48-size); line-height: var(--text-display-48-line-height); font-weight: var(--text-display-48-weight); }
.text-display-40 { font-family: var(--font-family-base); font-size: var(--text-display-40-size); line-height: var(--text-display-40-line-height); font-weight: var(--text-display-40-weight); }
.text-display-36 { font-family: var(--font-family-base); font-size: var(--text-display-36-size); line-height: var(--text-display-36-line-height); font-weight: var(--text-display-36-weight); }
.text-display-32 { font-family: var(--font-family-base); font-size: var(--text-display-32-size); line-height: var(--text-display-32-line-height); font-weight: var(--text-display-32-weight); }
.text-display-28 { font-family: var(--font-family-base); font-size: var(--text-display-28-size); line-height: var(--text-display-28-line-height); font-weight: var(--text-display-28-weight); }
.text-display-24 { font-family: var(--font-family-base); font-size: var(--text-display-24-size); line-height: var(--text-display-24-line-height); font-weight: var(--text-display-24-weight); }
.text-display-22 { font-family: var(--font-family-base); font-size: var(--text-display-22-size); line-height: var(--text-display-22-line-height); font-weight: var(--text-display-22-weight); }
.text-display-20 { font-family: var(--font-family-base); font-size: var(--text-display-20-size); line-height: var(--text-display-20-line-height); font-weight: var(--text-display-20-weight); }
.text-display-18 { font-family: var(--font-family-base); font-size: var(--text-display-18-size); line-height: var(--text-display-18-line-height); font-weight: var(--text-display-18-weight); }
.text-display-16 { font-family: var(--font-family-base); font-size: var(--text-display-16-size); line-height: var(--text-display-16-line-height); font-weight: var(--text-display-16-weight); }
.text-display-14 { font-family: var(--font-family-base); font-size: var(--text-display-14-size); line-height: var(--text-display-14-line-height); font-weight: var(--text-display-14-weight); }
.text-display-12 { font-family: var(--font-family-base); font-size: var(--text-display-12-size); line-height: var(--text-display-12-line-height); font-weight: var(--text-display-12-weight); }

.text-body-18   { font-family: var(--font-family-base); font-size: var(--text-body-18-size);  line-height: var(--text-body-18-line-height);  font-weight: var(--text-body-18-weight);  }
.text-body-16   { font-family: var(--font-family-base); font-size: var(--text-body-16-size);  line-height: var(--text-body-16-line-height);  font-weight: var(--text-body-16-weight);  }
.text-body-14   { font-family: var(--font-family-base); font-size: var(--text-body-14-size);  line-height: var(--text-body-14-line-height);  font-weight: var(--text-body-14-weight);  }
.text-body-12   { font-family: var(--font-family-base); font-size: var(--text-body-12-size);  line-height: var(--text-body-12-line-height);  font-weight: var(--text-body-12-weight);  }

.text-body-18m  { font-family: var(--font-family-base); font-size: var(--text-body-18m-size); line-height: var(--text-body-18m-line-height); font-weight: var(--text-body-18m-weight); }
.text-body-16m  { font-family: var(--font-family-base); font-size: var(--text-body-16m-size); line-height: var(--text-body-16m-line-height); font-weight: var(--text-body-16m-weight); }
.text-body-14m  { font-family: var(--font-family-base); font-size: var(--text-body-14m-size); line-height: var(--text-body-14m-line-height); font-weight: var(--text-body-14m-weight); }
.text-body-12m  { font-family: var(--font-family-base); font-size: var(--text-body-12m-size); line-height: var(--text-body-12m-line-height); font-weight: var(--text-body-12m-weight); }
.text-body-11m  { font-family: var(--font-family-base); font-size: var(--text-body-11m-size); line-height: var(--text-body-11m-line-height); font-weight: var(--text-body-11m-weight); }
.text-body-8m   { font-family: var(--font-family-base); font-size: var(--text-body-8m-size);  line-height: var(--text-body-8m-line-height);  font-weight: var(--text-body-8m-weight);  }