/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --economistimpact-accent: rgb(227,18,11); /* @kind color */
  --economistimpact-contrast-mid: rgb(89,89,89); /* @kind color */
  --economistimpact-contrast-neutral: rgb(51,51,51); /* @kind color */
  --economistimpact-contrast: rgb(13,13,13); /* @kind color */
  --economistimpact-main-fade: rgb(242,242,242); /* @kind color */
  --economistimpact-main-mid: rgb(179,179,179); /* @kind color */
  --economistimpact-main: rgb(255,255,255); /* @kind color */
  --spacing-base: 8;
  --spacing-l2: 24;
  --spacing-l3: 32;
  --spacing-l4: 40;
  --spacing-s1: 6;
  --spacing-s2: 4;
}

:root[data-mode="inverted"] {
  --economistimpact-accent: rgb(227,18,11); /* @kind color */
  --economistimpact-contrast-mid: rgb(179,179,179); /* @kind color */
  --economistimpact-contrast-neutral: rgb(217,217,217); /* @kind color */
  --economistimpact-contrast: rgb(255,255,255); /* @kind color */
  --economistimpact-main-fade: rgb(26,26,26); /* @kind color */
  --economistimpact-main-mid: rgb(89,89,89); /* @kind color */
  --economistimpact-main: rgb(13,13,13); /* @kind color */
}

:root[data-mode="mobile"] {
  --spacing-base: 6;
  --spacing-l2: 18;
  --spacing-l3: 24;
  --spacing-l4: 30;
  --spacing-s1: 4.5;
  --spacing-s2: 3;
}