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

:root {
  --bg-default-primary: var(--gray-50); /* @kind color */
  --body-bodys-font-size: 14; /* @kind font */
  --body-bodys-lineheight: 18; /* @kind font */
  --body-bodyxs-font-size: 12; /* @kind font */
  --body-bodyxs-lineheight: 14; /* @kind font */
  --box: rgb(255,255,255); /* @kind color */
  --color-text-icons-primary: rgba(8,8,8,0.96); /* @kind color */
  --color-text-icons-secondary: rgba(8,8,8,0.56); /* @kind color */
  --core-red-700: rgb(225,17,17); /* @kind color */
  --dimensions-10x: 20; /* @kind spacing */
  --gray-1000: rgb(8,8,8); /* @kind color */
  --gray-150: rgb(236,236,236); /* @kind color */
  --gray-50: rgb(249,249,249); /* @kind color */
  --gray-900: rgb(38,38,38); /* @kind color */
  --header-h3-font-size: 24; /* @kind font */
  --header-h3-lineheight: 30; /* @kind font */
  --main-bulma: rgb(0,0,0); /* @kind color */
  --menu-height: 30; /* @kind spacing */
  --monochrome-arkus: rgb(160,160,160); /* @kind color */
  --monochrome-bulma: rgb(41,40,40); /* @kind color */
  --page: rgb(255,255,255); /* @kind color */
  --piccolo: rgb(0,153,255); /* @kind color */
  --radius-base: 6;
  --radius-tile: 16;
  --red-400: rgb(255,61,81); /* @kind color */
  --red-600: rgb(243,27,49); /* @kind color */
  --surfaces-default-general-solid-secondary: var(--gray-150); /* @kind color */
  --surfaces-default-general-transparent-primary-2: rgba(8,8,8,0.03); /* @kind color */
  --surfaces-default-general-transparent-primary-3: var(--surfaces-default-general-transparent-primary); /* @kind color */
  --surfaces-default-general-transparent-primary: rgba(8,8,8,0.03); /* @kind color */
  --surfaces-default-general-transparent-secondary: rgba(8,8,8,0.06); /* @kind color */
  --surfaces-default-general-transparent-tertiary-2: var(--surfaces-default-general-transparent-tertiary); /* @kind color */
  --surfaces-default-general-transparent-tertiary: rgba(8,8,8,0.12); /* @kind color */
  --surfaces-inverse-general-transparent-primary: rgba(255,255,255,0.06); /* @kind color */
  --surfaces-inverse-general-transparent-tertiary: rgba(255,255,255,0.2); /* @kind color */
  --surfaces-ondark-general-transparent-primary: rgba(255,255,255,0.06); /* @kind color */
  --surfaces-ondark-general-transparent-tertiary: rgba(255,255,255,0.2); /* @kind color */
  --surfaces-onlight-general-transparent-primary: rgba(8,8,8,0.03); /* @kind color */
  --surfaces-onlight-general-transparent-tertiary: rgba(8,8,8,0.12); /* @kind color */
  --text-icons-default-general-primary-2: rgba(8,8,8,0.96); /* @kind color */
  --text-icons-default-general-primary: rgba(8,8,8,0.96); /* @kind color */
  --text-icons-default-general-secondary-2: rgba(8,8,8,0.56); /* @kind color */
  --text-icons-default-general-secondary-3: var(--text-icons-default-general-secondary); /* @kind color */
  --text-icons-default-general-secondary: rgba(8,8,8,0.56); /* @kind color */
  --text-icons-default-general-tertiary: rgba(8,8,8,0.28); /* @kind color */
  --text-icons-default-status-negative-2: var(--text-icons-default-status-negative); /* @kind color */
  --text-icons-default-status-negative: var(--red-600); /* @kind color */
  --text-icons-inverse-general-secondary: rgba(255,255,255,0.56); /* @kind color */
  --text-icons-inverse-status-negative: var(--red-400); /* @kind color */
  --text-icons-ondark-general-secondary: rgba(255,255,255,0.56); /* @kind color */
  --text-icons-ondark-status-negative: var(--red-400); /* @kind color */
  --text-icons-onlight-general-secondary: rgba(8,8,8,0.56); /* @kind color */
  --text-icons-onlight-status-negative: var(--red-600); /* @kind color */
}

:root[data-theme="dark"], .dark {
  --bg-default-primary: var(--gray-1000); /* @kind color */
  --main-bulma: rgb(255,255,255); /* @kind color */
  --monochrome-arkus: rgb(160,160,160); /* @kind color */
  --monochrome-bulma: rgb(255,255,255); /* @kind color */
  --piccolo: rgb(0,153,255); /* @kind color */
  --surfaces-default-general-solid-secondary: var(--gray-900); /* @kind color */
  --surfaces-default-general-transparent-primary-2: rgba(255,255,255,0.06); /* @kind color */
  --surfaces-default-general-transparent-primary-3: var(--surfaces-ondark-general-transparent-primary); /* @kind color */
  --surfaces-default-general-transparent-primary: rgba(255,255,255,0.06); /* @kind color */
  --surfaces-default-general-transparent-secondary: rgba(255,255,255,0.12); /* @kind color */
  --surfaces-default-general-transparent-tertiary-2: var(--surfaces-ondark-general-transparent-tertiary); /* @kind color */
  --surfaces-default-general-transparent-tertiary: rgba(255,255,255,0.2); /* @kind color */
  --surfaces-inverse-general-transparent-primary: rgba(8,8,8,0.03); /* @kind color */
  --surfaces-inverse-general-transparent-tertiary: rgba(8,8,8,0.12); /* @kind color */
  --surfaces-ondark-general-transparent-primary: rgba(255,255,255,0.06); /* @kind color */
  --surfaces-ondark-general-transparent-tertiary: rgba(255,255,255,0.2); /* @kind color */
  --surfaces-onlight-general-transparent-primary: rgba(8,8,8,0.03); /* @kind color */
  --surfaces-onlight-general-transparent-tertiary: rgba(8,8,8,0.12); /* @kind color */
  --text-icons-default-general-primary-2: rgba(255,255,255,0.96); /* @kind color */
  --text-icons-default-general-primary: rgba(255,255,255,0.96); /* @kind color */
  --text-icons-default-general-secondary-2: rgba(255,255,255,0.56); /* @kind color */
  --text-icons-default-general-secondary-3: var(--text-icons-ondark-general-secondary); /* @kind color */
  --text-icons-default-general-secondary: rgba(255,255,255,0.56); /* @kind color */
  --text-icons-default-general-tertiary: rgba(255,255,255,0.28); /* @kind color */
  --text-icons-default-status-negative-2: var(--text-icons-ondark-status-negative); /* @kind color */
  --text-icons-default-status-negative: var(--red-400); /* @kind color */
  --text-icons-inverse-general-secondary: rgba(8,8,8,0.56); /* @kind color */
  --text-icons-inverse-status-negative: var(--red-600); /* @kind color */
  --text-icons-ondark-general-secondary: rgba(255,255,255,0.56); /* @kind color */
  --text-icons-ondark-status-negative: var(--red-400); /* @kind color */
  --text-icons-onlight-general-secondary: rgba(8,8,8,0.56); /* @kind color */
  --text-icons-onlight-status-negative: var(--red-600); /* @kind color */
}

:root[data-mode="mediumscreens"] {
  --body-bodys-font-size: 14; /* @kind font */
  --body-bodys-lineheight: 18; /* @kind font */
  --body-bodyxs-font-size: 12; /* @kind font */
  --body-bodyxs-lineheight: 14; /* @kind font */
  --header-h3-font-size: 20; /* @kind font */
  --header-h3-lineheight: 26; /* @kind font */
}

:root[data-mode="smallscreens"] {
  --body-bodys-font-size: 14; /* @kind font */
  --body-bodys-lineheight: 18; /* @kind font */
  --body-bodyxs-font-size: 12; /* @kind font */
  --body-bodyxs-lineheight: 14; /* @kind font */
  --header-h3-font-size: 20; /* @kind font */
  --header-h3-lineheight: 26; /* @kind font */
}

:root[data-theme="light"], .light {
  --surfaces-default-general-transparent-primary-3: var(--surfaces-onlight-general-transparent-primary); /* @kind color */
  --surfaces-default-general-transparent-tertiary-2: var(--surfaces-onlight-general-transparent-tertiary); /* @kind color */
  --text-icons-default-general-secondary-3: var(--text-icons-onlight-general-secondary); /* @kind color */
  --text-icons-default-status-negative-2: var(--text-icons-onlight-status-negative); /* @kind color */
}

:root[data-mode="inverse"] {
  --surfaces-default-general-transparent-primary-3: var(--surfaces-inverse-general-transparent-primary); /* @kind color */
  --surfaces-default-general-transparent-tertiary-2: var(--surfaces-inverse-general-transparent-tertiary); /* @kind color */
  --text-icons-default-general-secondary-3: var(--text-icons-inverse-general-secondary); /* @kind color */
  --text-icons-default-status-negative-2: var(--text-icons-inverse-status-negative); /* @kind color */
}

:root[data-mode="colored"] {
  --color-text-icons-primary: rgba(255,255,255,0.96); /* @kind color */
  --color-text-icons-secondary: rgba(255,255,255,0.56); /* @kind color */
}