:root,
.light {
  /* https://tailwindcss.com/docs/customizing-colors#using-css-variables */

  --color-white: 255 255 255; /* #ffffff */
  --color-black: 0 0 0; /* #000000 */

  --color-gray-1: 179 179 179; /* gray #b3b3b3*/
  --color-gray-2: 84 84 84; /* dark gray #545454 */
  --color-gray-3: 18 18 18; /* smoke #121212 */

  --color-blue-1: 143 199 255; /* basin #8fc7ff */
  --color-blue-2: 46 141 238; /* gulf #2e8dee */
  --color-blue-3: 32 129 226; /* sea blue #2081e2 */
  --color-blue-4: 24 104 183; /* dark sea blue #1868b7 */
  --color-blue-5: 35 90 163; /* offshore #235aa3 */

  --color-green-1: 104 242 171; /* light seagrass #68f2ab */
  --color-green-2: 52 199 123; /* seagrass #34c77b */
  --color-green-3: 12 149 78; /* dark seagrass #0c954e */

  --color-yellow-1: 246 192 0; /* starfish #f6c000 */
  --color-yellow-2: 197 158 16; /* dark starfish #c59e10 */

  --color-red-1: 235 107 107; /* light coral #eb6b6b */
  --color-red-2: 235 87 87; /* coral #eb5757 */
  --color-red-3: 230 41 41; /* dark coral #e62929 */

  --color-accent-red: var(--color-red-3); /* dark coral */
  --color-accent-purple: 93 50 233; /* octopus #5d32e9 */
  --color-accent-fuchsia: 233 50 190; /* pink fish #e932be */
  --color-accent-orange: 242 153 74; /* seahorse #f2994a */
  --color-accent-cerulean: 21 178 229; /* marina blue #15b2e5 */
  --color-accent-aqua: 43 205 228; /* aqua #2bcde4 */

  --color-base-1: var(--color-white);
  --color-base-2: 253 253 253; /* #fdfdfd */

  --color-component-gray-1: rgb(var(--color-gray-3) / 4%);
  --color-component-gray-2: rgb(var(--color-gray-3) / 8%);
  --color-component-gray-3: rgb(var(--color-gray-3) / 12%);
  --color-component-gray-4: rgb(var(--color-gray-3) / 20%);

  --color-elevation-1: var(--color-white);
  --color-elevation-1-subtle: var(--color-white);
  --color-elevation-2: var(--color-white);
  --color-elevation-3: var(--color-white);

  --color-text-primary: var(--color-gray-3);
  --color-text-secondary: var(--color-gray-2);
  --color-text-interactive-primary: var(--color-blue-3);
  --color-text-interactive-primary-hover: var(--color-blue-5);
  --color-text-interactive-secondary: var(--color-gray-3);
  --color-text-interactive-secondary-hover: var(--color-gray-2);

  --color-interactive-icon-primary: var(--color-gray-3);
  --color-interactive-icon-primary-hover: var(--color-gray-2);
  --color-interactive-icon-secondary: var(--color-gray-2);
  --color-interactive-icon-secondary-hover: var(--color-gray-3);

  --color-border-1: rgb(var(--color-gray-3) / 8%);
  --color-border-2: rgb(var(--color-gray-3) / 12%);
  --color-border-3: rgb(var(--color-gray-3) / 32%);

  --shadow-elevation-1: 0px 4px 16px rgb(var(--color-black) / 4%);
  --shadow-elevation-1-subtle: 0px 4px 16px rgb(var(--color-black) / 8%);
  --shadow-elevation-2: 0px 6px 24px rgb(var(--color-black) / 12%);
  --shadow-elevation-3: 0px 6px 32px rgb(var(--color-black) / 20%);

  background: rgb(var(--color-base-1));
  color: rgb(var(--color-text-primary));
}

.dark {
  --color-base-1: var(--color-gray-3);
  --color-base-2: var(--color-gray-3);

  --color-component-gray-1: rgb(var(--color-white) / 4%);
  --color-component-gray-2: rgb(var(--color-white) / 8%);
  --color-component-gray-3: rgb(var(--color-white) / 12%);
  --color-component-gray-4: rgb(var(--color-white) / 20%);

  --color-border-1: rgb(var(--color-white) / 8%);
  --color-border-2: rgb(var(--color-white) / 12%);
  --color-border-3: rgb(var(--color-white) / 32%);

  --color-elevation-1: 32 32 32; /* #202020 */
  --color-elevation-1-subtle: var(--color-elevation-1);
  --color-elevation-2: 37 37 37; /* #252525 */
  --color-elevation-3: 46 46 46; /* #2e2e2e */

  --color-text-primary: var(--color-white);
  --color-text-secondary: var(--color-gray-1);
  --color-text-interactive-primary: var(--color-blue-1);
  --color-text-interactive-primary-hover: var(--color-blue-3);
  --color-text-interactive-secondary: var(--color-white);
  --color-text-interactive-secondary-hover: var(--color-gray-1);

  --color-interactive-icon-primary: var(--color-white);
  --color-interactive-icon-primary-hover: var(--color-gray-1);
  --color-interactive-icon-secondary: var(--color-gray-1);
  --color-interactive-icon-secondary-hover: var(--color-white);

  background: rgb(var(--color-base-1));
  color: rgb(var(--color-text-primary));
}

html,
body {
  font-family: var(--font-family-inter);
  font-variant-ligatures: no-contextual;
}

/* fallback */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v134/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
    format("woff2");
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* fallback */
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 100 700;
  src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v133/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzaqkNCeE.woff2)
    format("woff2");
}

.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* fallback */
@font-face {
  font-family: "Material Symbols Sharp";
  font-style: normal;
  font-weight: 100 700;
  src: url(https://fonts.gstatic.com/s/materialsymbolssharp/v130/gNMVW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4aWHSSmlN.woff2)
    format("woff2");
}

.material-symbols-sharp {
  font-family: "Material Symbols Sharp";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}