styles.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-primary: 209 100% 51%;
  --color-background: 0 0% 100%;
  --color-muted: 0 0% 50%;
  --color-secondary: 0 0% 30%;
  --color-foreground: 0 0% 13%;
  --color-border: 0 0% 88%;
  --color-success: 142 76% 36%;
  --color-error: 0 76% 57%;

  --astro-code-foreground: #24292e;
  --astro-code-token-constant: #0550ae;
  --astro-code-token-string: #032f62;
  --astro-code-token-comment: #6e7781;
  --astro-code-token-keyword: #d73a49;
  --astro-code-token-parameter: #24292e;
  --astro-code-token-function: #6f42c1;
  --astro-code-token-string-expression: #032f62;
  --astro-code-token-punctuation: #24292e;
  --astro-code-token-link: #0969da;

  @media (prefers-color-scheme: dark) {
    --color-background: 0 0% 8%;
    --color-muted: 0 0% 50%;
    --color-secondary: 0 0% 70%;
    --color-foreground: 0 0% 87%;
    --color-border: 0 0% 18%;

    --astro-code-foreground: #c9d1d9;
    --astro-code-token-constant: #79c0ff;
    --astro-code-token-string: #a5d6ff;
    --astro-code-token-comment: #8b949e;
    --astro-code-token-keyword: #ff7b72;
    --astro-code-token-parameter: #c9d1d9;
    --astro-code-token-function: #d2a8ff;
    --astro-code-token-string-expression: #a5d6ff;
    --astro-code-token-punctuation: #c9d1d9;
    --astro-code-token-link: #58a6ff;
  }

  font-feature-settings: "liga" 1, /* Contextual Alternates */ "calt" 1,
    /* Discretionary Ligatures */ "dlig" 1, /* fSquare punctuation */ "ss07" 1,
    /* Square quotes */ "ss08" 1, /* Slashed zero */ "zero" 1, /* Tabular numbers */ "tnum" 1,
    /* Open six */ "cv03" 1, /* Open nine */ "cv04" 1, /* Alternate one */ "cv01" 1,
    /* Flat-top three */ "cv09", /* Open 4 */ "cv02" 1;

  @supports (font-variation-settings: normal) {
    /* Use variable font if supported */
    .font-display {
      font-family: InterVariable, sans-serif;
    }
  }
}

* {
  @apply underline-offset-2;
  @apply border-border;
}

a,
button,
label[for],
[href] [class*="group-hover"] {
  @apply transition;
  @apply ease-out;
  @apply duration-150;
  @apply cursor-pointer;
}