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

@layer base {
  html {
    color-scheme: dark;
  }

  body {
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
  }

  /* Sichtbare Caret-Animation auf Fokus, damit Tastaturbenutzer sofort sehen, wo sie sind */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* Selektion in Akzentfarbe */
  ::selection {
    background: color-mix(in oklab, var(--accent) 30%, transparent);
    color: var(--fg);
  }
}

@layer utilities {
  .text-accent {
    color: var(--accent);
  }
  .bg-accent {
    background-color: var(--accent);
  }
  .border-accent {
    border-color: var(--accent);
  }
  .text-muted {
    color: var(--muted);
  }
  .bg-panel {
    background-color: var(--panel);
  }
  .border-hairline {
    border-color: var(--hairline);
  }
  .font-mono {
    font-family: var(--font-mono);
  }
}