:root {
  /* colors */
  --blue-50: #eff5ff;
  --blue-100: #e2ecff;
  --blue-200: #c5d8ff;
  --blue-300: #a8c4ff;
  --blue-400: #7aa6ff;
  --blue-500: #4b88ff;
  --blue-600: #3168e9;
  --blue-700: #2458d4;
  --blue-800: #1d4bac;
  --blue-900: #1c3e91;
  --blue-950: #183275;

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

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

  --gray-light: var(--gray-200);
  --gray-lighter: var(--gray-100);
  --gray-dark: var(--gray-950);

  /* base theme */
  --color-lightest: var(--gray-50);
  --color-darkest: var(--gray-darkest);
  --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-600);
  --accent-color-hover: var(--blue-800);

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

  --about: #ff6347;
  --books: #32cd32;
  --concerts: #e75480;
  --country: #20b2aa;
  --error: #d92525;
  --favorite: #ff69b4;
  --links: #9370db;
  --moon: #6a5acd;
  --music: #1e90ff;
  --newsletter: #40e0d0;
  --now: #ff1493;
  --posts: #008080;
  --search: #4682b4;
  --sun: #ffa500;
  --tattoo: #b22222;
  --tv: #ff4500;
  --warning: #ff8c00;
  --webrings: #da70d6;

  /* outline */
  --outline-default: 2px dashed var(--accent-color);

  /* 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: .7rem;
  --font-size-sm: .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: 600;
  --font-weight-extrabold: 800;

  --line-height-reduced: 1.5;
  --line-height-default: 2;

  /* spacing */
  --sizing-xs: .25rem;
  --sizing-sm: .5rem;
  --sizing-md: .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-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;

  /* 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 -60px 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;

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

/* dark theme */
:root.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-400);
    --accent-color-hover: var(--blue-200);
    --gray-light: var(--gray-800);
    --gray-lighter: var(--gray-900);
    --gray-dark: var(--gray-200);
    --brand-github: #f5f5f5;
}

@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-400);
    --accent-color-hover: var(--blue-200);
    --gray-light: var(--gray-800);
    --gray-lighter: var(--gray-900);
    --gray-dark: var(--gray-200);
    --brand-github: #f5f5f5;
  }
}