@import "tailwindcss";
@import "fumadocs-ui/css/lib/default-colors.css";
@import "fumadocs-ui/css/preset.css";
@import "fumapress/css/preset.css";

@theme {
  --color-fd-background: oklch(0.975 0.004 106.47);
  --color-fd-foreground: oklch(0.263 0.013 100.51);
  --color-fd-muted: oklch(0.958 0.005 95.1);
  --color-fd-muted-foreground: oklch(0.319 0.012 98.55);
  --color-fd-popover: oklch(0.958 0.005 95.1);
  --color-fd-popover-foreground: oklch(0.263 0.013 100.51);
  --color-fd-card: oklch(0.958 0.005 95.1);
  --color-fd-card-foreground: oklch(0.263 0.013 100.51);
  --color-fd-border: oklch(0.263 0.013 100.51 / 0.1);
  --color-fd-primary: oklch(0.652 0.214 37.99);
  --color-fd-primary-foreground: oklch(1 0 0);
  --color-fd-secondary: oklch(0.936 0.007 97.36);
  --color-fd-secondary-foreground: oklch(0.263 0.013 100.51);
  --color-fd-accent: oklch(0.936 0.007 97.36);
  --color-fd-accent-foreground: oklch(0.263 0.013 100.51);
  --color-fd-ring: oklch(0.652 0.214 37.99);
  --color-fd-overlay: oklch(0.263 0.013 100.51 / 0.2);
  --color-fd-selection: oklch(0.263 0.013 100.51 / 0.15);
  --color-fd-card-hover: oklch(0.952 0.005 95.1);
  --color-fd-card-border: oklch(0.263 0.013 100.51 / 0.024);
  --color-fd-media: oklch(0.874 0.009 78.28);

  --default-font-family: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
}

.dark {
  --color-fd-background: oklch(0.182 0.014 94.03);
  --color-fd-foreground: oklch(0.944 0.001 17.18);
  --color-fd-muted: oklch(0.235 0.012 91.75);
  --color-fd-muted-foreground: oklch(0.869 0.002 67.82);
  --color-fd-popover: oklch(0.214 0.012 91.77);
  --color-fd-popover-foreground: oklch(0.944 0.001 17.18);
  --color-fd-card: oklch(0.214 0.012 91.77);
  --color-fd-card-foreground: oklch(0.944 0.001 17.18);
  --color-fd-border: oklch(0.944 0.001 17.18 / 0.1);
  --color-fd-primary: oklch(0.652 0.214 37.99);
  --color-fd-primary-foreground: oklch(1 0 0);
  --color-fd-secondary: oklch(0.235 0.012 91.75);
  --color-fd-secondary-foreground: oklch(0.944 0.001 17.18);
  --color-fd-accent: oklch(0.26 0.011 91.72);
  --color-fd-accent-foreground: oklch(0.944 0.001 17.18);
  --color-fd-ring: oklch(0.652 0.214 37.99);
  --color-fd-overlay: oklch(0 0 0 / 0.4);
  --color-fd-selection: oklch(0.944 0.001 17.18 / 0.15);
  --color-fd-card-hover: oklch(0.222 0.012 91.76);
  --color-fd-card-border: oklch(0.944 0.001 17.18 / 0.024);
  --color-fd-media: oklch(0.39 0.017 78.09);
}

::selection {
  background-color: var(--color-fd-selection);
}

[data-fd-home-layout-container] {
  max-width: none;
  padding: 0;
}

:where(table) {
  font-variant-numeric: tabular-nums;
}

.shimmer {
  color: var(--color-fd-muted-foreground);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes shimmer {
    from {
      background-position: 200% 0;
    }
    to {
      background-position: -200% 0;
    }
  }

  .shimmer {
    animation: shimmer 1.6s linear infinite;
    background: linear-gradient(
        90deg,
        var(--color-fd-muted-foreground) 40%,
        var(--color-fd-foreground) 50%,
        var(--color-fd-muted-foreground) 60%
      )
      0 0 / 200% 100%;
    background-clip: text;
    color: transparent;
  }
}

/* Three glyphs sharing one cell. Only the last is opaque at rest. */
.step > * {
  grid-area: 1 / 1;
}

.type {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes step-queued {
    0%,
    49.9% {
      opacity: 1;
    }
    50%,
    100% {
      opacity: 0;
    }
  }

  @keyframes step-running {
    0%,
    49.9% {
      opacity: 0;
    }
    50%,
    62.4% {
      opacity: 1;
    }
    62.5%,
    100% {
      opacity: 0;
    }
  }

  @keyframes step-done {
    0%,
    62.4% {
      opacity: 0;
    }
    62.5%,
    100% {
      opacity: 1;
    }
  }

  .step > * {
    animation-delay: calc(var(--step) * 2s - 8s);
    animation-duration: 16s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1, end);
  }

  .step--queued {
    animation-name: step-queued;
  }

  .step--running {
    animation-name: step-running;
  }

  .step--done {
    animation-name: step-done;
  }

  @keyframes type-first {
    0% {
      width: 0;
    }
    13%,
    100% {
      width: var(--chars);
    }
  }

  @keyframes type-second {
    0%,
    13% {
      width: 0;
    }
    26%,
    100% {
      width: var(--chars);
    }
  }

  @keyframes caret {
    0%,
    49% {
      opacity: 1;
    }
    50%,
    100% {
      opacity: 0;
    }
  }

  .type {
    animation-duration: 16s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-timing-function: steps(var(--steps), end);
  }

  .type:first-child {
    animation-name: type-first;
  }

  .type:last-child {
    animation-name: type-second;
  }

  .caret {
    animation: caret 1.1s steps(1, end) infinite;
  }

  @keyframes row-in {
    0% {
      opacity: 0;
      transform: translateY(3px);
    }
    6%,
    100% {
      opacity: 1;
      transform: none;
    }
  }

  .row-in {
    animation: row-in 16s ease-out infinite both;
    animation-delay: calc(var(--row) * 0.45s);
  }
}