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

:root {
  --120: 120; /* @kind spacing */
  --16: 16; /* @kind spacing */
  --24-2: 24; /* @kind spacing */
  --240: 240; /* @kind spacing */
  --24: 24; /* @kind spacing */
  --4-2: 4; /* @kind spacing */
  --4-3: 4; /* @kind spacing */
  --4: 4; /* @kind spacing */
  --80: 80; /* @kind spacing */
  --accent: rgb(0,0,255); /* @kind color */
  --bg-2: rgb(250,250,250); /* @kind color */
  --bg-3: rgb(250,250,250); /* @kind color */
  --bg-4: rgb(243,244,246); /* @kind color */
  --bg: rgb(250,250,250); /* @kind color */
  --blue: rgb(0,0,255); /* @kind color */
  --body-2: rgba(96,110,123,0.5); /* @kind color */
  --body-3: 14; /* @kind spacing */
  --body: 15; /* @kind spacing */
  --h1-2: rgb(229,233,237); /* @kind color */
  --h1: 84; /* @kind spacing */
  --h2-2: rgb(217,221,225); /* @kind color */
  --h2-3: rgb(217,221,225); /* @kind color */
  --h2: 48; /* @kind spacing */
  --h3-2: 32; /* @kind spacing */
  --h3-3: rgba(96,110,123,0.32); /* @kind color */
  --h3-4: 32; /* @kind spacing */
  --h3: rgba(96,110,123,0.32); /* @kind color */
  --h4-2: 22; /* @kind spacing */
  --h4-3: rgba(96,110,123,0.32); /* @kind color */
  --h4-4: rgba(96,110,123,0.4); /* @kind color */
  --h4-5: 22; /* @kind spacing */
  --h4-6: rgba(96,110,123,0.32); /* @kind color */
  --h4: 22; /* @kind spacing */
  --h5-2: rgba(96,110,123,0.4); /* @kind color */
  --h5-3: 17; /* @kind spacing */
  --h5-4: rgba(96,110,123,0.4); /* @kind color */
  --h5: 17; /* @kind spacing */
  --heading: rgb(229,233,237); /* @kind color */
  --light: rgb(250,250,250); /* @kind color */
  --line-2: rgba(17,17,17,0.06); /* @kind color */
  --line-3: rgba(17,17,17,0.06); /* @kind color */
  --line: rgba(17,17,17,0.06); /* @kind color */
  --primary-2: rgb(17,17,17); /* @kind color */
  --primary-3: rgb(17,17,17); /* @kind color */
  --primary-4: rgb(17,17,17); /* @kind color */
  --primary: rgb(17,17,17); /* @kind color */
  --subheading: rgb(217,221,225); /* @kind color */
  --text-2: rgba(96,110,123,0.8); /* @kind color */
  --text: rgba(96,110,123,0.8); /* @kind color */
}

:root[data-mode="gradient-bg"] {
  --bg-2: rgb(17,17,17); /* @kind color */
  --bg-4: rgb(17,17,17); /* @kind color */
  --bg: rgb(17,17,17); /* @kind color */
  --blue: rgb(0,0,255); /* @kind color */
  --body-2: rgba(243,244,246,0.5); /* @kind color */
  --h1-2: rgba(250,250,250,0.32); /* @kind color */
  --h2-2: rgba(250,250,250,0.4); /* @kind color */
  --h3-3: rgba(250,250,250,0.4); /* @kind color */
  --h3: rgba(250,250,250,0.4); /* @kind color */
  --h4-3: rgba(250,250,250,0.48); /* @kind color */
  --h4-6: rgba(250,250,250,0.48); /* @kind color */
  --h5-2: rgba(250,250,250,0.56); /* @kind color */
  --h5-4: rgba(250,250,250,0.56); /* @kind color */
  --heading: rgba(243,244,246,0.16); /* @kind color */
  --light: rgba(32,33,33,0.6); /* @kind color */
  --line-3: rgba(243,244,246,0.08); /* @kind color */
  --line: rgba(255,255,255,0.12); /* @kind color */
  --primary-2: rgb(250,250,250); /* @kind color */
  --primary-4: rgba(243,244,246,0.9); /* @kind color */
  --primary: rgb(250,250,250); /* @kind color */
  --subheading: rgba(243,244,246,0.2); /* @kind color */
  --text-2: rgba(250,250,250,0.8); /* @kind color */
  --text: rgba(250,250,250,0.8); /* @kind color */
}

:root[data-mode="photo-bg"] {
  --accent: rgb(250,250,250); /* @kind color */
  --bg-2: rgb(17,17,17); /* @kind color */
  --bg-3: rgb(17,17,17); /* @kind color */
  --bg: rgb(17,17,17); /* @kind color */
  --h1-2: rgba(250,250,250,0.4); /* @kind color */
  --h2-2: rgba(250,250,250,0.4); /* @kind color */
  --h2-3: rgba(250,250,250,0.3); /* @kind color */
  --h3: rgba(250,250,250,0.48); /* @kind color */
  --h4-3: rgba(250,250,250,0.48); /* @kind color */
  --h4-4: rgba(250,250,250,0.36); /* @kind color */
  --h5-2: rgba(250,250,250,0.56); /* @kind color */
  --line-2: rgba(250,250,250,0.12); /* @kind color */
  --line: rgba(255,255,255,0.12); /* @kind color */
  --primary-2: rgb(250,250,250); /* @kind color */
  --primary-3: rgb(250,250,250); /* @kind color */
  --primary: rgb(250,250,250); /* @kind color */
  --text: rgba(250,250,250,0.8); /* @kind color */
}

:root[data-mode="tablet"] {
  --120: 100; /* @kind spacing */
  --16: 16; /* @kind spacing */
  --24-2: 20; /* @kind spacing */
  --240: 160; /* @kind spacing */
  --24: 20; /* @kind spacing */
  --4-2: 2; /* @kind spacing */
  --4-3: 2; /* @kind spacing */
  --4: 2; /* @kind spacing */
  --80: 60; /* @kind spacing */
  --body-3: 14; /* @kind spacing */
  --body: 14; /* @kind spacing */
  --h1: 66; /* @kind spacing */
  --h2: 38; /* @kind spacing */
  --h3-2: 24; /* @kind spacing */
  --h3-4: 24; /* @kind spacing */
  --h4-2: 20; /* @kind spacing */
  --h4-5: 20; /* @kind spacing */
  --h4: 20; /* @kind spacing */
  --h5-3: 16; /* @kind spacing */
  --h5: 16; /* @kind spacing */
}

:root[data-mode="mobile"] {
  --120: 80; /* @kind spacing */
  --16: 16; /* @kind spacing */
  --24-2: 16; /* @kind spacing */
  --240: 120; /* @kind spacing */
  --24: 16; /* @kind spacing */
  --4-2: 0; /* @kind spacing */
  --4-3: 0; /* @kind spacing */
  --4: 0; /* @kind spacing */
  --80: 40; /* @kind spacing */
  --body-3: 13; /* @kind spacing */
  --body: 13; /* @kind spacing */
  --h1: 38; /* @kind spacing */
  --h2: 26; /* @kind spacing */
  --h3-2: 22; /* @kind spacing */
  --h3-4: 22; /* @kind spacing */
  --h4-2: 18; /* @kind spacing */
  --h4-5: 18; /* @kind spacing */
  --h4: 18; /* @kind spacing */
  --h5-3: 15; /* @kind spacing */
  --h5: 15; /* @kind spacing */
}