flagon-io/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-fg-soft: var(--g1t-fg-soft);
  --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);
}

/* In the base layer, so a component can opt out with a utility. */
@layer base {
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  /*
   * A grid's items may shrink below their content. Without this, one long
   * line that does not wrap (a command, a commit hash, an address) widens
   * the whole column, and on a phone the page scrolls sideways.
   */
  .grid > * {
    min-width: 0;
  }

  /* Checkboxes, radios and ranges in g1t's own colour, not the browser's. */
  :root {
    accent-color: var(--color-accent);
  }
}

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

/* Rendered markdown: READMEs, briefs and docs. */
.prose > :first-child {
  margin-top: 0;
  padding-top: 0;
}
.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;
}
.prose h4 {
  @apply mt-6 text-sm font-semibold;
}
.prose li.task-list-item {
  @apply list-none;
}
.prose ul.contains-task-list {
  @apply pl-1;
}
.prose kbd {
  @apply rounded border border-line-strong bg-raised px-1.5 py-px font-mono text-[0.8em] shadow-[inset_0_-1px_0_var(--color-line-strong)];
}
.prose del {
  @apply text-muted;
}
.prose details {
  @apply rounded-lg border border-line px-4 py-2;
}
.prose summary {
  @apply cursor-pointer font-medium;
}
.prose img {
  @apply inline max-w-full;
}
.prose section[data-footnotes] {
  @apply mt-10 border-t border-line pt-4 text-sm text-muted;
}
.prose a[data-footnote-ref] {
  @apply no-underline;
}

/* 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;
}

/* Artwork: dashes that flow along a track. */
.art-flow {
  animation: dash 1.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .art-flow {
    animation: none;
  }
}

/*
 * Behind the landing page's opening: the same dark gray, with a faint
 * lavender and peach glow low on the horizon and a few stars.
 */
.dusk {
  background:
    radial-gradient(1px 1px at 12% 18%, rgb(255 255 255 / 0.35), transparent),
    radial-gradient(1px 1px at 27% 8%, rgb(255 255 255 / 0.25), transparent),
    radial-gradient(1px 1px at 63% 12%, rgb(255 255 255 / 0.3), transparent),
    radial-gradient(1.5px 1.5px at 90% 9%, rgb(255 255 255 / 0.35), transparent),
    radial-gradient(60% 35% at 50% 100%, rgb(255 189 140 / 0.08), transparent 70%),
    radial-gradient(80% 45% at 50% 100%, rgb(182 168 255 / 0.1), transparent 75%),
    var(--color-bg);
}
/* A planet rising behind the horizon, its lit edge catching the glow. */
.dusk-planet {
  background: radial-gradient(circle at 70% 30%, rgb(182 168 255 / 0.12), rgb(255 189 140 / 0.04) 45%, transparent 70%);
  box-shadow: inset 14px -8px 50px rgb(255 214 186 / 0.07);
}