@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-bg: #faf7f2;
  --color-fg: #0a1628;
  --color-accent: #2563eb;
  --color-accent-bright: #3b82f6;

  --font-sans: var(--font-geist-sans), system-ui, -apple-system, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
  --font-pixel: var(--font-pixel), "VT323", monospace;
}

@layer base {
  :root {
    color-scheme: light;
  }

  .dark {
    --color-bg: #0a1628;
    --color-fg: #faf7f2;
    --color-accent: #3b82f6;
    --color-accent-bright: #60a5fa;
    color-scheme: dark;
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-feature-settings: "ss01", "cv11";
  }

  ::selection {
    background-color: var(--color-accent);
    color: white;
  }

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

@layer utilities {
  .font-pixel {
    font-family: var(--font-pixel);
    letter-spacing: 0.02em;
  }
}