@import "tailwindcss";
@import "./typography.css";

/* JetBrains Mono font */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Treat `data-theme="mocha"` as dark variant so Tailwind's `dark:` utilities apply */
@custom-variant dark (&:where([data-theme=mocha], [data-theme=mocha] *));

/* Catppuccin Latte (light theme) */
:root,
html[data-theme="light"] {
  --background: #eff1f5; /* Base */
  --foreground: #4c4f69; /* Text */
  --accent: #1e66f5; /* Blue */
  --muted: #ccd0da; /* Surface 0 */
  --border: #9ca0b0; /* Overlay 0 */
}

/* Catppuccin Mocha (dark theme - default) */
html[data-theme="mocha"] {
  --background: #1e1e2e; /* Base */
  --foreground: #cdd6f4; /* Text */
  --accent: #89b4fa; /* Blue */
  --muted: #313244; /* Surface 0 */
  --border: #6c7086; /* Overlay 0 */
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-accent: var(--accent);
  --color-muted: var(--muted);
  --color-border: var(--border);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@layer base {
  * {
    @apply border-border outline-accent/75;
    scrollbar-width: auto;
    scrollbar-color: var(--color-muted) transparent;
  }
  html {
    @apply overflow-y-scroll scroll-smooth;
  }
  body {
    @apply flex min-h-svh flex-col bg-background font-mono text-foreground selection:bg-accent/75 selection:text-background;
  }
  a,
  button {
    @apply outline-offset-1 outline-accent focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-dashed;
  }
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
  section,
  footer {
    @apply mx-auto max-w-app px-4;
  }
}

@utility max-w-app {
  @apply max-w-3xl;
}

.active-nav {
  @apply underline decoration-wavy decoration-2 underline-offset-4;
}

/* Source: https://piccalil.li/blog/a-more-modern-css-reset/ */
/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 1rem;
}
