syntaqx/g1t

@import "tailwindcss" source(".");
@import "@g1t/theme/tokens.css";

/* Tailwind's names for the shared g1t tokens. */
@theme {
  --font-sans: var(--g1t-font-sans);
  --font-mono: var(--g1t-font-mono);

  --color-bg: var(--g1t-bg);
  --color-surface: var(--g1t-surface);
  --color-raised: var(--g1t-raised);
  --color-line: var(--g1t-line);
  --color-line-strong: var(--g1t-line-strong);

  --color-fg: var(--g1t-fg);
  --color-muted: var(--g1t-muted);
  --color-faint: var(--g1t-faint);

  --color-accent: var(--g1t-accent);
  --color-accent-dim: var(--g1t-accent-dim);

  --color-info: var(--g1t-info);
  --color-merged: var(--g1t-merged);
  --color-warn: var(--g1t-warn);
  --color-danger: var(--g1t-danger);

  --animate-fade-up: fade-up 0.6s ease-out both;
  --animate-dash: dash 1.2s linear infinite;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: -16;
  }
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  @apply bg-bg font-sans text-fg antialiased;
  font-feature-settings: "cv11", "ss01";
}

::selection {
  background: color-mix(in srgb, var(--color-accent) 35%, transparent);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Rendered markdown: READMEs, briefs and docs. */
.prose {
  @apply leading-7 text-fg;
}
.prose > * + * {
  @apply mt-4;
}
.prose h1 {
  @apply mt-0 text-3xl font-semibold tracking-tight;
}
.prose h2 {
  @apply mt-10 border-b border-line pb-2 text-xl font-semibold tracking-tight;
}
.prose h3 {
  @apply mt-8 text-base font-semibold;
}
.prose p,
.prose li {
  @apply text-[0.9375rem] text-fg/90;
}
.prose a {
  @apply text-accent underline decoration-accent/40 underline-offset-4 hover:decoration-accent;
}
.prose ul {
  @apply list-disc space-y-1.5 pl-6;
}
.prose ol {
  @apply list-decimal space-y-1.5 pl-6;
}
.prose code {
  @apply rounded bg-raised px-1.5 py-0.5 font-mono text-[0.85em];
}
.prose pre {
  @apply overflow-x-auto rounded-lg border border-line bg-surface p-4 font-mono text-sm leading-6;
}
.prose pre code {
  @apply bg-transparent p-0;
}
.prose blockquote {
  @apply border-l-2 border-line-strong pl-4 text-muted;
}
.prose table {
  @apply w-full border-collapse text-sm;
}
.prose th {
  @apply border-b border-line-strong px-3 py-2 text-left font-medium text-muted;
}
.prose td {
  @apply border-b border-line px-3 py-2 align-top;
}
.prose hr {
  @apply border-line;
}

/* Syntax-highlighted code from Shiki. */
.shiki {
  @apply bg-transparent! font-mono text-sm leading-6;
}
.shiki code {
  counter-reset: line;
  display: block;
}
.shiki .line::before {
  counter-increment: line;
  content: counter(line);
  @apply mr-5 inline-block w-10 text-right text-faint select-none;
}