:root {
  --borders-l: 2px;
  --borders-m: 1.5px;
  --borders-s: 1px;
  --opacity-0: 0;
  --opacity-100: 100%;
  --opacity-25: 25%;
  --opacity-50: 50%;
  --opacity-75: 75%;
  --palette-blue-100: #eff6ff;
  --palette-blue-200: #d9e9fd;
  --palette-blue-300: #bfdbfe;
  --palette-blue-400: #a8c9f2;
  --palette-blue-500: #639de7;
  --palette-blue-600: #3b82f6;
  --palette-blue-700: #1955b7;
  --palette-blue-800: #123b7e;
  --palette-blue-900: #002665;
  --palette-brand-gr01: #273540;
  --palette-brand-gr02: #0e4d64;
  --palette-brand-green: #00895c;
  --palette-brand-red: #ce2d2d;
  --palette-energie-100: #ffefea;
  --palette-energie-200: #ffdfd5;
  --palette-energie-300: #f7cabb;
  --palette-energie-400: #ebb09d;
  --palette-energie-500: #ca8670;
  --palette-energie-600: #c0684c;
  --palette-energie-700: #a44d31;
  --palette-energie-800: #842607;
  --palette-energie-900: #601800;
  --palette-green-100: #ecfcf3;
  --palette-green-200: #d2f7eb;
  --palette-green-300: #c5ebde;
  --palette-green-400: #8ad3bb;
  --palette-green-500: #33b288;
  --palette-green-600: #00895c;
  --palette-green-700: #005f40;
  --palette-green-800: #004b32;
  --palette-green-900: #003625;
  --palette-groupe-100: #f0f6ff;
  --palette-groupe-200: #e1eeff;
  --palette-groupe-300: #c3d7ef;
  --palette-groupe-400: #9cb9db;
  --palette-groupe-500: #7ca0c4;
  --palette-groupe-600: #5987a7;
  --palette-groupe-700: #2e6685;
  --palette-groupe-800: #234c62;
  --palette-groupe-900: #002c44;
  --palette-neutral-100: #f8f8f8;
  --palette-neutral-200: #edeff1;
  --palette-neutral-300: #d5d9dd;
  --palette-neutral-400: #a2afb9;
  --palette-neutral-500: #738595;
  --palette-neutral-600: #4f6373;
  --palette-neutral-700: #3d4f5e;
  --palette-neutral-800: #273540;
  --palette-neutral-900: #1b2930;
  --palette-neutral-white: #ffffff;
  --palette-orange-100: #fff4f0;
  --palette-orange-200: #ffe8e1;
  --palette-orange-300: #ffd2c5;
  --palette-orange-400: #ffb49f;
  --palette-orange-500: #fe8f70;
  --palette-orange-600: #ff724b;
  --palette-orange-700: #cd3a11;
  --palette-orange-800: #bb2800;
  --palette-orange-900: #6c1700;
  --palette-pink-100: #ffeef9;
  --palette-pink-200: #ffe0f4;
  --palette-pink-300: #ffc6ea;
  --palette-pink-400: #ffa1dd;
  --palette-pink-500: #fb6bc7;
  --palette-pink-600: #ff4bbe;
  --palette-pink-700: #dd2a9c;
  --palette-pink-800: #a8006b;
  --palette-pink-900: #720049;
  --palette-plateau-central-100: #f0fbf1;
  --palette-plateau-central-200: #d4eed6;
  --palette-plateau-central-300: #bee5c1;
  --palette-plateau-central-400: #aedeb2;
  --palette-plateau-central-500: #8bc790;
  --palette-plateau-central-600: #6ba56f;
  --palette-plateau-central-700: #419947;
  --palette-plateau-central-800: #2a6f2f;
  --palette-plateau-central-900: #144d18;
  --palette-purple-100: #f9f4ff;
  --palette-purple-200: #eddfff;
  --palette-purple-300: #dabeff;
  --palette-purple-400: #c69aff;
  --palette-purple-500: #aa6bfb;
  --palette-purple-600: #8c3bf6;
  --palette-purple-700: #731ee2;
  --palette-purple-800: #48089b;
  --palette-purple-900: #2b0063;
  --palette-red-100: #fff1f2;
  --palette-red-200: #ffe0e0;
  --palette-red-300: #fecaca;
  --palette-red-400: #ffadad;
  --palette-red-500: #ed6e6e;
  --palette-red-600: #ce2d2d;
  --palette-red-700: #a82222;
  --palette-red-800: #800000;
  --palette-red-900: #600000;
  --palette-semences-100: #fdf6e4;
  --palette-semences-200: #f9edcc;
  --palette-semences-300: #f7e1a2;
  --palette-semences-400: #f7da88;
  --palette-semences-500: #ffd459;
  --palette-semences-600: #fdc41f;
  --palette-semences-700: #cf9a00;
  --palette-semences-800: #875a00;
  --palette-semences-900: #5b3c00;
  --palette-yellow-100: #fffae0;
  --palette-yellow-200: #fcf1b7;
  --palette-yellow-300: #ffec83;
  --palette-yellow-400: #fee451;
  --palette-yellow-500: #ffde24;
  --palette-yellow-600: #f7d200;
  --palette-yellow-700: #ddbc00;
  --palette-yellow-800: #947e00;
  --palette-yellow-900: #675800;
  --radius-full: 999px;
  --radius-l: 12px;
  --radius-m: 8px;
  --radius-none: 0;
  --radius-s: 4px;
  --shadow-l-blur: 24px;
  --shadow-l-color: rgba(27, 41, 48, 0.12);
  --shadow-l-offset-x: 0;
  --shadow-l-offset-y: 8px;
  --shadow-l-spread: -4px;
  --shadow-m-blur: 8px;
  --shadow-m-color: rgba(27, 41, 48, 0.1);
  --shadow-m-offset-x: 0;
  --shadow-m-offset-y: 4px;
  --shadow-m-spread: -2px;
  --shadow-s-blur: 3px;
  --shadow-s-color: rgba(27, 41, 48, 0.08);
  --shadow-s-offset-x: 0;
  --shadow-s-offset-y: 1px;
  --shadow-s-spread: 0;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-4: 4px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-8: 8px;
  --shadow-s: var(--shadow-s-offset-x) var(--shadow-s-offset-y) var(--shadow-s-blur) var(--shadow-s-spread) var(--shadow-s-color);
  --shadow-m: var(--shadow-m-offset-x) var(--shadow-m-offset-y) var(--shadow-m-blur) var(--shadow-m-spread) var(--shadow-m-color);
  --shadow-l: var(--shadow-l-offset-x) var(--shadow-l-offset-y) var(--shadow-l-blur) var(--shadow-l-spread) var(--shadow-l-color);
  --marques-brand-100: var(--palette-groupe-100);
  --marques-brand-200: var(--palette-groupe-200);
  --marques-brand-300: var(--palette-groupe-300);
  --marques-brand-400: var(--palette-groupe-400);
  --marques-brand-500: var(--palette-groupe-500);
  --marques-brand-600: var(--palette-groupe-600);
  --marques-brand-700: var(--palette-groupe-700);
  --marques-brand-800: var(--palette-groupe-800);
  --marques-brand-900: var(--palette-groupe-900);
  --texts-body-base-bold-font-size: 16px;
  --texts-body-base-bold-line-height: 28px;
  --texts-body-base-font-size: 16px;
  --texts-body-base-line-height: 28px;
  --texts-body-extra-large-font-size: 20px;
  --texts-body-extra-large-line-height: 32px;
  --texts-body-footnote-font-size: 11px;
  --texts-body-footnote-line-height: 17px;
  --texts-body-large-bold-font-size: 18px;
  --texts-body-large-bold-line-height: 32px;
  --texts-body-large-font-size: 18px;
  --texts-body-large-line-height: 32px;
  --texts-body-lead-font-size: 20px;
  --texts-body-lead-line-height: 34px;
  --texts-body-small-bold-font-size: 14px;
  --texts-body-small-bold-line-height: 25px;
  --texts-body-small-font-size: 14px;
  --texts-body-small-line-height: 25px;
  --texts-display-d1-font-size: 64px;
  --texts-display-d1-line-height: 72px;
  --texts-display-d2-font-size: 56px;
  --texts-display-d2-line-height: 68px;
  --texts-display-d3-font-size: 40px;
  --texts-display-d3-line-height: 48px;
  --texts-editorial-citation-attribution-font-size: 13px;
  --texts-editorial-citation-attribution-line-height: 20px;
  --texts-editorial-citation-font-size: 28px;
  --texts-editorial-citation-line-height: 48px;
  --texts-editorial-highlight-font-size: 16px;
  --texts-editorial-highlight-line-height: 28px;
  --texts-heading-h1-font-size: 48px;
  --texts-heading-h1-line-height: 58px;
  --texts-heading-h2-font-size: 40px;
  --texts-heading-h2-line-height: 52px;
  --texts-heading-h3-font-size: 32px;
  --texts-heading-h3-line-height: 48px;
  --texts-heading-h4-font-size: 24px;
  --texts-heading-h4-line-height: 32px;
  --texts-heading-h5-font-size: 22px;
  --texts-heading-h5-line-height: 30px;
  --texts-metric-description-font-size: 13px;
  --texts-metric-description-line-height: 21px;
  --texts-metric-label-font-size: 16px;
  --texts-metric-label-line-height: 21px;
  --texts-metric-value-font-size: 72px;
  --texts-metric-value-line-height: 72px;
  --texts-ui-breadcrumb-font-size: 12px;
  --texts-ui-breadcrumb-line-height: 18px;
  --texts-ui-button-l-font-size: 18px;
  --texts-ui-button-l-line-height: 22px;
  --texts-ui-button-m-font-size: 16px;
  --texts-ui-button-m-line-height: 24px;
  --texts-ui-button-s-font-size: 14px;
  --texts-ui-button-s-line-height: 21px;
  --texts-ui-caption-font-size: 12px;
  --texts-ui-caption-line-height: 18px;
  --texts-ui-label-font-size: 14px;
  --texts-ui-label-line-height: 21px;
  --texts-ui-small-font-size: 12px;
  --texts-ui-small-line-height: 18px;
  --texts-ui-tag-font-size: 11px;
  --texts-ui-tag-line-height: 18px;
}

:root[data-brand=groupe-ragt] {
  --marques-brand-100: var(--palette-groupe-100);
  --marques-brand-200: var(--palette-groupe-200);
  --marques-brand-300: var(--palette-groupe-300);
  --marques-brand-400: var(--palette-groupe-400);
  --marques-brand-500: var(--palette-groupe-500);
  --marques-brand-600: var(--palette-groupe-600);
  --marques-brand-700: var(--palette-groupe-700);
  --marques-brand-800: var(--palette-groupe-800);
  --marques-brand-900: var(--palette-groupe-900);
}

:root[data-brand=plateau-central] {
  --marques-brand-100: var(--palette-plateau-central-100);
  --marques-brand-200: var(--palette-plateau-central-200);
  --marques-brand-300: var(--palette-plateau-central-300);
  --marques-brand-400: var(--palette-plateau-central-400);
  --marques-brand-500: var(--palette-plateau-central-500);
  --marques-brand-600: var(--palette-plateau-central-600);
  --marques-brand-700: var(--palette-plateau-central-700);
  --marques-brand-800: var(--palette-plateau-central-800);
  --marques-brand-900: var(--palette-plateau-central-900);
}

:root[data-brand=ragt-semences] {
  --marques-brand-100: var(--palette-semences-100);
  --marques-brand-200: var(--palette-semences-200);
  --marques-brand-300: var(--palette-semences-300);
  --marques-brand-400: var(--palette-semences-400);
  --marques-brand-500: var(--palette-semences-500);
  --marques-brand-600: var(--palette-semences-600);
  --marques-brand-700: var(--palette-semences-700);
  --marques-brand-800: var(--palette-semences-800);
  --marques-brand-900: var(--palette-semences-900);
}

:root[data-brand=ragt-energie] {
  --marques-brand-100: var(--palette-energie-100);
  --marques-brand-200: var(--palette-energie-200);
  --marques-brand-300: var(--palette-energie-300);
  --marques-brand-400: var(--palette-energie-400);
  --marques-brand-500: var(--palette-energie-500);
  --marques-brand-600: var(--palette-energie-600);
  --marques-brand-700: var(--palette-energie-700);
  --marques-brand-800: var(--palette-energie-800);
  --marques-brand-900: var(--palette-energie-900);
}

@media (max-width: 960px) {
  :root:not([data-viewport]) {
    --texts-body-base-bold-font-size: 16px;
    --texts-body-base-bold-line-height: 28px;
    --texts-body-base-font-size: 16px;
    --texts-body-base-line-height: 28px;
    --texts-body-extra-large-font-size: 19px;
    --texts-body-extra-large-line-height: 30px;
    --texts-body-footnote-font-size: 11px;
    --texts-body-footnote-line-height: 17px;
    --texts-body-large-bold-font-size: 16px;
    --texts-body-large-bold-line-height: 28px;
    --texts-body-large-font-size: 16px;
    --texts-body-large-line-height: 28px;
    --texts-body-lead-font-size: 18px;
    --texts-body-lead-line-height: 31px;
    --texts-body-small-bold-font-size: 14px;
    --texts-body-small-bold-line-height: 25px;
    --texts-body-small-font-size: 14px;
    --texts-body-small-line-height: 25px;
    --texts-display-d1-font-size: 48px;
    --texts-display-d1-line-height: 60px;
    --texts-display-d2-font-size: 40px;
    --texts-display-d2-line-height: 56px;
    --texts-display-d3-font-size: 36px;
    --texts-display-d3-line-height: 44px;
    --texts-editorial-citation-attribution-font-size: 13px;
    --texts-editorial-citation-attribution-line-height: 20px;
    --texts-editorial-citation-font-size: 24px;
    --texts-editorial-citation-line-height: 40px;
    --texts-editorial-highlight-font-size: 16px;
    --texts-editorial-highlight-line-height: 28px;
    --texts-heading-h1-font-size: 40px;
    --texts-heading-h1-line-height: 49px;
    --texts-heading-h2-font-size: 36px;
    --texts-heading-h2-line-height: 42px;
    --texts-heading-h3-font-size: 26px;
    --texts-heading-h3-line-height: 36px;
    --texts-heading-h4-font-size: 22px;
    --texts-heading-h4-line-height: 30px;
    --texts-heading-h5-font-size: 20px;
    --texts-heading-h5-line-height: 26px;
    --texts-metric-description-font-size: 13px;
    --texts-metric-description-line-height: 21px;
    --texts-metric-label-font-size: 16px;
    --texts-metric-label-line-height: 21px;
    --texts-metric-value-font-size: 64px;
    --texts-metric-value-line-height: 64px;
    --texts-ui-breadcrumb-font-size: 12px;
    --texts-ui-breadcrumb-line-height: 18px;
    --texts-ui-button-l-font-size: 16px;
    --texts-ui-button-l-line-height: 19px;
    --texts-ui-button-m-font-size: 16px;
    --texts-ui-button-m-line-height: 24px;
    --texts-ui-button-s-font-size: 14px;
    --texts-ui-button-s-line-height: 21px;
    --texts-ui-caption-font-size: 12px;
    --texts-ui-caption-line-height: 18px;
    --texts-ui-label-font-size: 14px;
    --texts-ui-label-line-height: 21px;
    --texts-ui-small-font-size: 12px;
    --texts-ui-small-line-height: 18px;
    --texts-ui-tag-font-size: 11px;
    --texts-ui-tag-line-height: 18px;
  }
}
@media (max-width: 640px) {
  :root:not([data-viewport]) {
    --texts-body-base-bold-font-size: 14px;
    --texts-body-base-bold-line-height: 25px;
    --texts-body-base-font-size: 14px;
    --texts-body-base-line-height: 25px;
    --texts-body-extra-large-font-size: 18px;
    --texts-body-extra-large-line-height: 28px;
    --texts-body-footnote-font-size: 11px;
    --texts-body-footnote-line-height: 17px;
    --texts-body-large-bold-font-size: 16px;
    --texts-body-large-bold-line-height: 28px;
    --texts-body-large-font-size: 16px;
    --texts-body-large-line-height: 28px;
    --texts-body-lead-font-size: 16px;
    --texts-body-lead-line-height: 27px;
    --texts-body-small-bold-font-size: 13px;
    --texts-body-small-bold-line-height: 23px;
    --texts-body-small-font-size: 13px;
    --texts-body-small-line-height: 23px;
    --texts-display-d1-font-size: 36px;
    --texts-display-d1-line-height: 44px;
    --texts-display-d2-font-size: 32px;
    --texts-display-d2-line-height: 40px;
    --texts-display-d3-font-size: 28px;
    --texts-display-d3-line-height: 36px;
    --texts-editorial-citation-attribution-font-size: 12px;
    --texts-editorial-citation-attribution-line-height: 18px;
    --texts-editorial-citation-font-size: 20px;
    --texts-editorial-citation-line-height: 32px;
    --texts-editorial-highlight-font-size: 14px;
    --texts-editorial-highlight-line-height: 25px;
    --texts-heading-h1-font-size: 32px;
    --texts-heading-h1-line-height: 36px;
    --texts-heading-h2-font-size: 28px;
    --texts-heading-h2-line-height: 32px;
    --texts-heading-h3-font-size: 22px;
    --texts-heading-h3-line-height: 32px;
    --texts-heading-h4-font-size: 20px;
    --texts-heading-h4-line-height: 26px;
    --texts-heading-h5-font-size: 18px;
    --texts-heading-h5-line-height: 24px;
    --texts-metric-description-font-size: 12px;
    --texts-metric-description-line-height: 19px;
    --texts-metric-label-font-size: 14px;
    --texts-metric-label-line-height: 18px;
    --texts-metric-value-font-size: 48px;
    --texts-metric-value-line-height: 48px;
    --texts-ui-breadcrumb-font-size: 11px;
    --texts-ui-breadcrumb-line-height: 17px;
    --texts-ui-button-l-font-size: 16px;
    --texts-ui-button-l-line-height: 19px;
    --texts-ui-button-m-font-size: 14px;
    --texts-ui-button-m-line-height: 21px;
    --texts-ui-button-s-font-size: 14px;
    --texts-ui-button-s-line-height: 21px;
    --texts-ui-caption-font-size: 12px;
    --texts-ui-caption-line-height: 18px;
    --texts-ui-label-font-size: 13px;
    --texts-ui-label-line-height: 20px;
    --texts-ui-small-font-size: 12px;
    --texts-ui-small-line-height: 18px;
    --texts-ui-tag-font-size: 11px;
    --texts-ui-tag-line-height: 18px;
  }
}
:root[data-viewport=desktop] {
  --texts-body-base-bold-font-size: 16px;
  --texts-body-base-bold-line-height: 28px;
  --texts-body-base-font-size: 16px;
  --texts-body-base-line-height: 28px;
  --texts-body-extra-large-font-size: 20px;
  --texts-body-extra-large-line-height: 32px;
  --texts-body-footnote-font-size: 11px;
  --texts-body-footnote-line-height: 17px;
  --texts-body-large-bold-font-size: 18px;
  --texts-body-large-bold-line-height: 32px;
  --texts-body-large-font-size: 18px;
  --texts-body-large-line-height: 32px;
  --texts-body-lead-font-size: 20px;
  --texts-body-lead-line-height: 34px;
  --texts-body-small-bold-font-size: 14px;
  --texts-body-small-bold-line-height: 25px;
  --texts-body-small-font-size: 14px;
  --texts-body-small-line-height: 25px;
  --texts-display-d1-font-size: 64px;
  --texts-display-d1-line-height: 72px;
  --texts-display-d2-font-size: 56px;
  --texts-display-d2-line-height: 68px;
  --texts-display-d3-font-size: 40px;
  --texts-display-d3-line-height: 48px;
  --texts-editorial-citation-attribution-font-size: 13px;
  --texts-editorial-citation-attribution-line-height: 20px;
  --texts-editorial-citation-font-size: 28px;
  --texts-editorial-citation-line-height: 48px;
  --texts-editorial-highlight-font-size: 16px;
  --texts-editorial-highlight-line-height: 28px;
  --texts-heading-h1-font-size: 48px;
  --texts-heading-h1-line-height: 58px;
  --texts-heading-h2-font-size: 40px;
  --texts-heading-h2-line-height: 52px;
  --texts-heading-h3-font-size: 32px;
  --texts-heading-h3-line-height: 48px;
  --texts-heading-h4-font-size: 24px;
  --texts-heading-h4-line-height: 32px;
  --texts-heading-h5-font-size: 22px;
  --texts-heading-h5-line-height: 30px;
  --texts-metric-description-font-size: 13px;
  --texts-metric-description-line-height: 21px;
  --texts-metric-label-font-size: 16px;
  --texts-metric-label-line-height: 21px;
  --texts-metric-value-font-size: 72px;
  --texts-metric-value-line-height: 72px;
  --texts-ui-breadcrumb-font-size: 12px;
  --texts-ui-breadcrumb-line-height: 18px;
  --texts-ui-button-l-font-size: 18px;
  --texts-ui-button-l-line-height: 22px;
  --texts-ui-button-m-font-size: 16px;
  --texts-ui-button-m-line-height: 24px;
  --texts-ui-button-s-font-size: 14px;
  --texts-ui-button-s-line-height: 21px;
  --texts-ui-caption-font-size: 12px;
  --texts-ui-caption-line-height: 18px;
  --texts-ui-label-font-size: 14px;
  --texts-ui-label-line-height: 21px;
  --texts-ui-small-font-size: 12px;
  --texts-ui-small-line-height: 18px;
  --texts-ui-tag-font-size: 11px;
  --texts-ui-tag-line-height: 18px;
}

:root[data-viewport=tablet] {
  --texts-body-base-bold-font-size: 16px;
  --texts-body-base-bold-line-height: 28px;
  --texts-body-base-font-size: 16px;
  --texts-body-base-line-height: 28px;
  --texts-body-extra-large-font-size: 19px;
  --texts-body-extra-large-line-height: 30px;
  --texts-body-footnote-font-size: 11px;
  --texts-body-footnote-line-height: 17px;
  --texts-body-large-bold-font-size: 16px;
  --texts-body-large-bold-line-height: 28px;
  --texts-body-large-font-size: 16px;
  --texts-body-large-line-height: 28px;
  --texts-body-lead-font-size: 18px;
  --texts-body-lead-line-height: 31px;
  --texts-body-small-bold-font-size: 14px;
  --texts-body-small-bold-line-height: 25px;
  --texts-body-small-font-size: 14px;
  --texts-body-small-line-height: 25px;
  --texts-display-d1-font-size: 48px;
  --texts-display-d1-line-height: 60px;
  --texts-display-d2-font-size: 40px;
  --texts-display-d2-line-height: 56px;
  --texts-display-d3-font-size: 36px;
  --texts-display-d3-line-height: 44px;
  --texts-editorial-citation-attribution-font-size: 13px;
  --texts-editorial-citation-attribution-line-height: 20px;
  --texts-editorial-citation-font-size: 24px;
  --texts-editorial-citation-line-height: 40px;
  --texts-editorial-highlight-font-size: 16px;
  --texts-editorial-highlight-line-height: 28px;
  --texts-heading-h1-font-size: 40px;
  --texts-heading-h1-line-height: 49px;
  --texts-heading-h2-font-size: 36px;
  --texts-heading-h2-line-height: 42px;
  --texts-heading-h3-font-size: 26px;
  --texts-heading-h3-line-height: 36px;
  --texts-heading-h4-font-size: 22px;
  --texts-heading-h4-line-height: 30px;
  --texts-heading-h5-font-size: 20px;
  --texts-heading-h5-line-height: 26px;
  --texts-metric-description-font-size: 13px;
  --texts-metric-description-line-height: 21px;
  --texts-metric-label-font-size: 16px;
  --texts-metric-label-line-height: 21px;
  --texts-metric-value-font-size: 64px;
  --texts-metric-value-line-height: 64px;
  --texts-ui-breadcrumb-font-size: 12px;
  --texts-ui-breadcrumb-line-height: 18px;
  --texts-ui-button-l-font-size: 16px;
  --texts-ui-button-l-line-height: 19px;
  --texts-ui-button-m-font-size: 16px;
  --texts-ui-button-m-line-height: 24px;
  --texts-ui-button-s-font-size: 14px;
  --texts-ui-button-s-line-height: 21px;
  --texts-ui-caption-font-size: 12px;
  --texts-ui-caption-line-height: 18px;
  --texts-ui-label-font-size: 14px;
  --texts-ui-label-line-height: 21px;
  --texts-ui-small-font-size: 12px;
  --texts-ui-small-line-height: 18px;
  --texts-ui-tag-font-size: 11px;
  --texts-ui-tag-line-height: 18px;
}

:root[data-viewport=phone] {
  --texts-body-base-bold-font-size: 14px;
  --texts-body-base-bold-line-height: 25px;
  --texts-body-base-font-size: 14px;
  --texts-body-base-line-height: 25px;
  --texts-body-extra-large-font-size: 18px;
  --texts-body-extra-large-line-height: 28px;
  --texts-body-footnote-font-size: 11px;
  --texts-body-footnote-line-height: 17px;
  --texts-body-large-bold-font-size: 16px;
  --texts-body-large-bold-line-height: 28px;
  --texts-body-large-font-size: 16px;
  --texts-body-large-line-height: 28px;
  --texts-body-lead-font-size: 16px;
  --texts-body-lead-line-height: 27px;
  --texts-body-small-bold-font-size: 13px;
  --texts-body-small-bold-line-height: 23px;
  --texts-body-small-font-size: 13px;
  --texts-body-small-line-height: 23px;
  --texts-display-d1-font-size: 36px;
  --texts-display-d1-line-height: 44px;
  --texts-display-d2-font-size: 32px;
  --texts-display-d2-line-height: 40px;
  --texts-display-d3-font-size: 28px;
  --texts-display-d3-line-height: 36px;
  --texts-editorial-citation-attribution-font-size: 12px;
  --texts-editorial-citation-attribution-line-height: 18px;
  --texts-editorial-citation-font-size: 20px;
  --texts-editorial-citation-line-height: 32px;
  --texts-editorial-highlight-font-size: 14px;
  --texts-editorial-highlight-line-height: 25px;
  --texts-heading-h1-font-size: 32px;
  --texts-heading-h1-line-height: 36px;
  --texts-heading-h2-font-size: 28px;
  --texts-heading-h2-line-height: 32px;
  --texts-heading-h3-font-size: 22px;
  --texts-heading-h3-line-height: 32px;
  --texts-heading-h4-font-size: 20px;
  --texts-heading-h4-line-height: 26px;
  --texts-heading-h5-font-size: 18px;
  --texts-heading-h5-line-height: 24px;
  --texts-metric-description-font-size: 12px;
  --texts-metric-description-line-height: 19px;
  --texts-metric-label-font-size: 14px;
  --texts-metric-label-line-height: 18px;
  --texts-metric-value-font-size: 48px;
  --texts-metric-value-line-height: 48px;
  --texts-ui-breadcrumb-font-size: 11px;
  --texts-ui-breadcrumb-line-height: 17px;
  --texts-ui-button-l-font-size: 16px;
  --texts-ui-button-l-line-height: 19px;
  --texts-ui-button-m-font-size: 14px;
  --texts-ui-button-m-line-height: 21px;
  --texts-ui-button-s-font-size: 14px;
  --texts-ui-button-s-line-height: 21px;
  --texts-ui-caption-font-size: 12px;
  --texts-ui-caption-line-height: 18px;
  --texts-ui-label-font-size: 13px;
  --texts-ui-label-line-height: 20px;
  --texts-ui-small-font-size: 12px;
  --texts-ui-small-line-height: 18px;
  --texts-ui-tag-font-size: 11px;
  --texts-ui-tag-line-height: 18px;
}

body {
  margin: 0;
  background: var(--palette-neutral-100);
  color: var(--palette-neutral-900);
  font-size: var(--texts-body-base-font-size);
  line-height: var(--texts-body-base-line-height);
}