/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/

/* Root
--------------------------------------------- */

:root {
  --font-sans: "GT-America-Standard", sans-serif;
  --font-sans-condensed: "GT-America-Condensed", sans-serif;
  --font-mono: "GT-America-Mono", monospace;
  --font-symbol: "Material Symbols Outlined";

  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: 1.875rem;
  --font-4xl: 2.25rem;
  --font-5xl: 3rem;
  --font-6xl: 3.75rem;
  --font-7xl: 4.5rem;

  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-black: 900;

  --font-normal: normal;
  --font-italic: italic;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-base: 1.5;

  --color-base-0: 255, 255, 255;
  --color-base-50: 246, 246, 246;
  --color-base-100: 231, 231, 231;
  --color-base-200: 209, 209, 209;
  --color-base-300: 176, 176, 176;
  --color-base-400: 136, 136, 136;
  --color-base-500: 109, 109, 109;
  --color-base-600: 93, 93, 93;
  --color-base-700: 79, 79, 79;
  --color-base-800: 69, 69, 69;
  --color-base-900: 61, 61, 61;
  --color-base-950: 17, 17, 17;
  --color-base-1000: 0, 0, 0;

  /* Dark */
  /* --color-base-0: 0, 0, 0;
  --color-base-50: 17, 17, 17;
  --color-base-100: 61, 61, 61;
  --color-base-200: 69, 69, 69;
  --color-base-300: 79, 79, 79;
  --color-base-400: 93, 93, 93;
  --color-base-500: 109, 109, 109;
  --color-base-600: 136, 136, 136;
  --color-base-700: 176, 176, 176;
  --color-base-800: 209, 209, 209;
  --color-base-900: 231, 231, 231;
  --color-base-950: 246, 246, 246;
  --color-base-1000: 255, 255, 255; */

  --color-accent-50: 237, 255, 254;
  --color-accent-100: 192, 254, 255;
  --color-accent-200: 129, 251, 255;
  --color-accent-300: 58, 248, 255;
  --color-accent-400: 0, 255, 255;
  --color-accent-500: 0, 225, 226;
  --color-accent-600: 0, 178, 183;
  --color-accent-700: 0, 140, 145;
  --color-accent-800: 0, 108, 114;
  --color-accent-900: 4, 88, 93;
  --color-accent-950: 0, 52, 58;

  --max-w-base: 2560px;
  --max-w-sm: 540px;
  --max-w-md: 720px;
  --max-w-lg: 960px;
  --max-w-xl: 1140px;
  --max-w-xxl: 1320px;
  --max-w-full: 100%;
}

.dark-mode {
  --color-base-0: 17, 17, 17;
  --color-base-50: 61, 61, 61;
  --color-base-100: 69, 69, 69;
  --color-base-200: 79, 79, 79;
  --color-base-300: 93, 93, 93;
  --color-base-400: 109, 109, 109;
  --color-base-500: 136, 136, 136;
  --color-base-600: 176, 176, 176;
  --color-base-700: 209, 209, 209;
  --color-base-800: 231, 231, 231;
  --color-base-900: 246, 246, 246;
  --color-base-950: 255, 255, 255;
  --color-base-1000: 255, 255, 255;
}