:root {
  /* colors */
  --blue-100: #a2c4ff;
  --blue-200: #6b9eff;
  --blue-300: #4a78ff;
  --blue-400: #3364ff;
  --blue-500: #2553e6;
  --blue-600: #1e42c7;

  --gray-100: #f6f7f8;
  --gray-200: #eceef1;
  --gray-300: #dfe3e8;
  --gray-400: #959eae;
  --gray-500: #7f899b;
  --gray-600: #626d7f;
  --gray-700: #545e71;
  --gray-800: #4a5365;
  --gray-900: #1a1d22;

  --white: #fff;
  --black: #000;

  --gray-lighter: var(--gray-200);
  --gray-light: var(--gray-300);
  --gray-medium: var(--gray-400);
  --gray-dark: var(--gray-800);

  /* base theme */
  --color-lightest: var(--white);
  --color-darkest: var(--black);
  --text-color: var(--color-darkest);
  --background-color: var(--color-lightest);
  --text-color-inverted: var(--color-lightest);
  --background-color-inverted: var(--color-darkest);
  --accent-color: var(--blue-400);
  --accent-color-hover: var(--blue-600);

  --brand-github-light: #333;
  --brand-github-dark: #f5f5f5;

  --brand-gmail: #ea4335;
  --brand-github: #333;
  --brand-npm: #cc3534;
  --brand-mastodon: #6364ff;
  --brand-listenbrainz: #e97941;
  --brand-buy-me-a-coffee: #40dca5;
  --brand-rss: #f26522;

  --moon: #6a5acd;
  --sun: #ffa500;

  --article-light: #007272;
  --about-light: #e4513a;
  --books-light: #1a7b1a;
  --collected-light: #9a501a;
  --concerts-light: #cb426e;
  --country-light: #146a67;
  --error-light: #b81f1f;
  --favorite-light: #b03c72;
  --link-light: #7b5cba;
  --music-light: #1565c3;
  --newsletter-light: #37b0b0;
  --now-light: #cc1076;
  --search-light: #3a6b94;
  --tattoo-light: #951b1b;
  --tv-light: #cc3600;
  --warning-light: #cc6f00;
  --webrings-light: #b054b0;

  --article-dark: #00ffff;
  --about-dark: #ff967d;
  --books-dark: #6fff6f;
  --collected-dark: #ffae73;
  --concerts-dark: #ff82aa;
  --country-dark: #80dcdc;
  --error-dark: #ff8b8b;
  --favorite-dark: #ff9ccd;
  --link-dark: #e2b8ff;
  --music-dark: #99ccff;
  --newsletter-dark: #91fffa;
  --now-dark: #ff82d5;
  --search-dark: #a0b8d9;
  --tattoo-dark: #ff7373;
  --tv-dark: #ff8f66;
  --warning-dark: #ffbf66;
  --webrings-dark: #ffb3ff;

  --article: var(--article-light);
  --about: var(--about-light);
  --books: var(--books-light);
  --collected: var(--collected-light);
  --concerts: var(--concerts-light);
  --country: var(--country-light);
  --error: var(--error-light);
  --favorite: var(--favorite-light);
  --link: var(--link-light);
  --music: var(--music-light);
  --newsletter: var(--newsletter-light);
  --now: var(--now-light);
  --search: var(--search-light);
  --tattoo: var(--tattoo-light);
  --tv: var(--tv-light);
  --warning: var(--warning-light);
  --webrings: var(--webrings-light);

  /* borders */
  --border-default: 1px solid var(--accent-color);
  --border-gray: 1px solid var(--gray-light);

  /* fonts */
  --font-mono: MonoLisa, Menlo, Consolas, Monaco, Liberation Mono,
    Lucida Console, ui-monospace, monospace;

  /* text */
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.85rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.15rem;
  --font-size-xl: 1.3rem;
  --font-size-2xl: 1.45rem;
  --font-size-3xl: 1.6rem;

  --font-weight-base: 400;
  --font-weight-bold: 700;

  --line-height-sm: 1;
  --line-height-md: 1.5;
  --line-height-base: 2;

  /* sizing */
  --sizing-xs: 0.25rem;
  --sizing-sm: 0.5rem;
  --sizing-md: 0.75rem;
  --sizing-lg: 1rem;
  --sizing-base: 1.5rem;
  --sizing-xl: 1.75rem;
  --sizing-2xl: 2rem;
  --sizing-3xl: 2.25rem;

  --sizing-svg-sm: 18px;
  --sizing-svg-base: 24px;

  /* spacing */
  --spacing-xs: var(--sizing-xs);
  --spacing-sm: var(--sizing-sm);
  --spacing-md: var(--sizing-md);
  --spacing-lg: var(--sizing-lg);
  --spacing-base: var(--sizing-base);
  --spacing-xl: var(--sizing-xl);
  --spacing-2xl: var(--sizing-2xl);
  --spacing-3xl: var(--sizing-3xl);

  --margin-vertical-base-horizontal-zero: var(--spacing-base) 0;

  /* radii */
  --border-radius-slight: var(--sizing-xs);
  --border-radius-full: 9999px;

  /* aspect ratios */
  --aspect-ratio-square: 1/1;
  --aspect-ratio-vertical: 2/3;
  --aspect-ratio-banner: 3/2;

  /* grid columns */
  --grid-columns-two: repeat(2, minmax(0, 1fr));
  --grid-columns-three: repeat(3, minmax(0, 1fr));
  --grid-columns-four: repeat(4, minmax(0, 1fr));
  --grid-columns-six: repeat(6, minmax(0, 1fr));

  --grid-poster: var(--grid-columns-two);
  --grid-square: var(--grid-columns-two);
  --grid-vertical: var(--grid-columns-three);

  @media screen and (min-width: 768px) {
    --grid-poster: var(--grid-columns-three);
    --grid-square: var(--grid-columns-four);
    --grid-vertical: var(--grid-columns-six);
  }

  /* transitions */
  --transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-duration-default: 300ms;

  /* svgs */
  --stroke-width-default: 1.4;
  --stroke-width-bold: 2;
  --inline-margin-bottom: -5px;

  /* shadows */
  --box-shadow-media: inset 0 -85px 60px -40px var(--black);
  --box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color);
  --text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px;

  /* modals */
  --modal-overlay-background-light: #ffffffbf;
  --modal-overlay-background-dark: #000000bf;
  --modal-overlay-background: var(--modal-overlay-background-light);

  /* input accent color */
  accent-color: var(--accent-color);
}

/* light theme */
:root[data-theme="light"] {
  --text-color: var(--color-darkest);
  --background-color: var(--color-lightest);
  --text-color-inverted: var(--color-lightest);
  --background-color-inverted: var(--color-darkest);
  --accent-color: var(--blue-400);
  --accent-color-hover: var(--blue-600);
  --gray-light: var(--gray-300);
  --gray-lighter: var(--gray-200);
  --gray-dark: var(--gray-800);
  --modal-overlay-background: var(--modal-overlay-background-light);
  --brand-github: var(--brand-github-light);
  --article: var(--article-light);
  --about: var(--about-light);
  --books: var(--books-light);
  --collected: var(--collected-light);
  --concerts: var(--concerts-light);
  --country: var(--country-light);
  --error: var(--error-light);
  --favorite: var(--favorite-light);
  --link: var(--link-light);
  --music: var(--music-light);
  --newsletter: var(--newsletter-light);
  --now: var(--now-light);
  --search: var(--search-light);
  --tattoo: var(--tattoo-light);
  --tv: var(--tv-light);
  --warning: var(--warning-light);
  --webrings: var(--webrings-light);
}

/* dark theme */
:root[data-theme="dark"] {
  --text-color: var(--color-lightest);
  --background-color: var(--color-darkest);
  --text-color-inverted: var(--color-darkest);
  --background-color-inverted: var(--color-lightest);
  --accent-color: var(--blue-200);
  --accent-color-hover: var(--blue-100);
  --gray-light: var(--gray-600);
  --gray-lighter: var(--gray-700);
  --gray-dark: var(--gray-300);
  --modal-overlay-background: var(--modal-overlay-background-dark);
  --brand-github: var(--brand-github-dark);
  --article: var(--article-dark);
  --about: var(--about-dark);
  --books: var(--books-dark);
  --collected: var(--collected-dark);
  --concerts: var(--concerts-dark);
  --country: var(--country-dark);
  --error: var(--error-dark);
  --favorite: var(--favorite-dark);
  --link: var(--link-dark);
  --music: var(--music-dark);
  --newsletter: var(--newsletter-dark);
  --now: var(--now-dark);
  --search: var(--search-dark);
  --tattoo: var(--tattoo-dark);
  --tv: var(--tv-dark);
  --warning: var(--warning-dark);
  --webrings: var(--webrings-dark);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: var(--color-lightest);
    --background-color: var(--color-darkest);
    --text-color-inverted: var(--color-darkest);
    --background-color-inverted: var(--color-lightest);
    --accent-color: var(--blue-200);
    --accent-color-hover: var(--blue-100);
    --gray-light: var(--gray-600);
    --gray-lighter: var(--gray-700);
    --gray-dark: var(--gray-300);
    --modal-overlay-background: var(--modal-overlay-background-dark);
    --brand-github: var(--brand-github-dark);
    --article: var(--article-dark);
    --about: var(--about-dark);
    --books: var(--books-dark);
    --collected: var(--collected-dark);
    --concerts: var(--concerts-dark);
    --country: var(--country-dark);
    --error: var(--error-dark);
    --favorite: var(--favorite-dark);
    --link: var(--link-dark);
    --music: var(--music-dark);
    --newsletter: var(--newsletter-dark);
    --now: var(--now-dark);
    --search: var(--search-dark);
    --tattoo: var(--tattoo-dark);
    --tv: var(--tv-dark);
    --warning: var(--warning-dark);
    --webrings: var(--webrings-dark);
  }
}