v10/site/src/styles/globals.css

@import 'tailwindcss';

/* before we begin with tailwind, let's go over some global rules */
/* nested lists should have lower-alpha style */
.list-decimal .list-decimal {
  list-style-type: lower-alpha;
}
/* slightly thinner decorations */
* {
  text-decoration-thickness: max(0.05em, 0.05rem);
}
/* global text decoration offset */
.font-sans {
  text-underline-offset: 0.25em;
}
.font-mono {
  text-underline-offset: 0.125em;
}
/* ligatures */
.font-mono {
  font-variant-ligatures: none;
}
/* stuff should leave room for the nav when scroll margining */
[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--spacing) * 5 + var(--scroll-mt, 0px));
}
/* misc */
b,
strong {
  font-weight: var(--font-weight-semibold);
}
mark {
  background-color: var(--color-yellow);
  color: var(--color-dark-100);
}

/* Ok, now let's do some tailwind stuff */
@custom-variant intent (&:hover, &:focus-within);
@custom-variant supports-container {
  @supports (container: size) {
    @slot;
  }
}
@custom-variant dark (&:where(.dark, .dark *));
.dark * {
  color-scheme: dark;
}
.dark .shiki,
.dark .shiki span,
.dark .astro-code,
.dark .astro-code span {
  color: var(--shiki-dark) !important;
}

/* theme inline tells tailwind to reference the value of these properties */
@theme inline {
  --font-*: initial;
  /* --font-instrument-sans and --font-ibm-plex-mono are defined in Base.astro */
  --font-sans: var(--font-instrument-sans);
  --font-mono: var(--font-ibm-plex-mono);
}
/* Everything else can be configured here */
@theme {
  --color-*: initial;

  --color-white: white;
  --color-black: black;

  --color-dark-110: #2a2928;
  --color-dark-100: #393836;
  --color-dark-90: #494741;
  --color-dark-80: #5a5850;
  --color-dark-40: #7d796a;

  --color-light-100: #fbf5d8;
  --color-light-80: #ebe4c1;
  --color-light-60: #d8d2b2;
  --color-light-40: #c7c2a4;

  --color-yellow: #fcb116;
  --color-orange: #f26222;
  --color-red: #ea3837;
  --color-purple: #a83b71;
  --color-blue: #3870b7;

  /* Typography */
  --tracking-*: initial;
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.04em;
  --tracking-widest: 0.08em;

  --font-weight-code-normal: 400;
  --font-weight-normal: 450;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --text-*: initial;
  --text-h1: 4rem; /* 64px */
  --text-h1--line-height: 1;
  --text-h1--letter-spacing: -0.04em;
  --text-h1--font-weight: var(--font-weight-semibold);
  --text-h2: 3rem; /* 48px */
  --text-h2--line-height: calc(56 / 48);
  --text-h2--letter-spacing: -0.04em;
  --text-h2--font-weight: var(--font-weight-semibold);
  --text-h3: 2.5rem; /* 40px */
  --text-h3--line-height: 1;
  --text-h3--letter-spacing: -0.04em;
  --text-h3--font-weight: var(--font-weight-semibold);
  --text-h4: 2rem; /* 32px */
  --text-h4--line-height: calc(40 / 32);
  --text-h4--letter-spacing: -0.02em;
  --text-h4--font-weight: var(--font-weight-semibold);
  --text-h5: 1.5rem; /* 24px */
  --text-h5--line-height: calc(32 / 24);
  --text-h5--letter-spacing: -0.02em;
  --text-h5--font-weight: var(--font-weight-medium);

  --text-lg: 1.25rem; /* 20px */
  --text-lg--line-height: calc(28 / 20);
  --text-lg--letter-spacing: -0.02em;
  --text-lg--font-weight: var(--font-weight-normal);
  --text-md: 1.125rem; /* 18px */
  --text-md--line-height: calc(26 / 18);
  --text-md--letter-spacing: -0.02em;
  --text-md--font-weight: var(--font-weight-normal);
  --text-base: 1rem; /* 16px */
  --text-base--line-height: calc(24 / 16);
  --text-base--letter-spacing: -0.02em;
  --text-base--font-weight: var(--font-weight-normal);
  --text-sm: 0.875rem; /* 14px */
  --text-sm--line-height: calc(20 / 14);
  --text-sm--letter-spacing: -0.02em;
  --text-sm--font-weight: var(--font-weight-normal);

  /* Notice the use of em, so that code scales with, say, headers */
  --text-code: 0.9375em;
  --text-code--line-height: calc(28 / 16);
  --text-code--letter-spacing: -0.02em;
  --text-code--font-weight: var(--font-weight-code-normal);
  /* if you don't want this scaling, use text-base-code */
  --text-base-code: 0.9375rem;
  --text-base-code--line-height: calc(28 / 16);
  --text-base-code--letter-spacing: -0.02em;
  --text-base-code--font-weight: var(--font-weight-code-normal);

  /* animations */
  --animate-marquee: marquee 40s linear infinite;
  @keyframes marquee {
    from {
      transform: translate3d(-50%, 0, 0);
    }
    to {
      transform: translate3d(0, 0, 0);
    }
  }
}