@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');

  :root {
    --background: oklch(0.96 0.01 80);
    --foreground: oklch(0.2 0.02 50);
    --primary: oklch(0.5 0.2 30);
    --muted-foreground: oklch(0.45 0.02 50);
    --border: oklch(0.8 0.03 60);
    --card: oklch(0.94 0.015 80);
    --primary-foreground: oklch(0.98 0.005 80);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --background: oklch(0.18 0.015 50);
      --foreground: oklch(0.92 0.015 80);
      --primary: oklch(0.75 0.18 35);
      --muted-foreground: oklch(0.6 0.02 80);
      --border: oklch(0.35 0.02 50);
      --card: oklch(0.22 0.015 50);
      --primary-foreground: oklch(0.15 0.01 50);
    }
  }

  body {
    background-color: var(--background) !important;
    color: var(--foreground) !important;
    font-family: 'Space Grotesk', system-ui, sans-serif !important;
  }

  .wrap {
    background: var(--background) !important;
  }

  .box {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.25rem !important;
    box-shadow: none !important;
  }

  h2, h3, h4 {
    font-family: 'Space Mono', monospace !important;
    color: var(--foreground) !important;
  }

  p, li, label {
    color: var(--foreground) !important;
  }

  a {
    color: var(--primary) !important;
  }

  .button, button, input[type="submit"] {
    background: var(--primary) !important;
    color: var(--primary-foreground) !important;
    font-family: 'Space Mono', monospace !important;
    border: none !important;
    border-radius: 0.25rem !important;
    font-size: 0.875rem !important;
  }

  .button:hover, button:hover, input[type="submit"]:hover {
    opacity: 0.9 !important;
  }

  .footer {
    color: var(--muted-foreground) !important;
  }

  .footer a {
    color: var(--muted-foreground) !important;
  }