@import "tailwindcss";
@import "@fontsource-variable/space-grotesk";

/* Accent (Rost/Rose) – zentral für Buttons, Links, Hover; hier anpassen für neues Look */
:root {
  --background: #ffffff;
  --foreground: #171717;
  --font-sans: "Space Grotesk Variable", ui-sans-serif, system-ui, sans-serif;
  --accent-50: #fff1f2;
  --accent-100: #ffe4e6;
  --accent-200: #fecdd3;
  --accent-300: #fda4af;
  --accent-400: #fb7185;
  --accent-500: #f43f5e;
  --accent-600: #e11d48;
  --accent-700: #be123c;
  --accent-800: #9f1239;
  --accent-900: #881337;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-sans);
  --font-mono: var(--font-geist-mono);
  --color-accent-50: var(--accent-50);
  --color-accent-100: var(--accent-100);
  --color-accent-200: var(--accent-200);
  --color-accent-300: var(--accent-300);
  --color-accent-400: var(--accent-400);
  --color-accent-500: var(--accent-500);
  --color-accent-600: var(--accent-600);
  --color-accent-700: var(--accent-700);
  --color-accent-800: var(--accent-800);
  --color-accent-900: var(--accent-900);
}

/* Primär-Button (z.B. „Speichern“, „New entry“) */
.btn-primary {
  @apply shrink-0 whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors;
  background-color: var(--accent-600);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--accent-700);
}
.btn-primary:disabled {
  @apply opacity-50;
}

/* Sekundär-Button / Outline (z.B. „Abbrechen“, „Back“) */
.btn-secondary {
  @apply rounded-lg border px-4 py-2 text-sm font-medium transition-colors;
  border-color: var(--accent-200);
  color: var(--accent-800);
  background-color: #fff;
}
.btn-secondary:hover {
  background-color: var(--accent-50);
}

/* Kleine Outline-Buttons / Links (z.B. Schema bearbeiten, Pagination) */
.btn-outline {
  @apply inline-flex items-center gap-2 rounded border px-3 py-1.5 text-sm font-medium transition-colors;
  border-color: var(--accent-200);
  color: var(--accent-800);
  background-color: #fff;
}
.btn-outline:hover {
  background-color: var(--accent-50);
}

/* Text-Links (Rostrot, zentral steuerbar) – Klasse für Inline-Links */
.link-accent {
  color: var(--accent-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-accent:hover {
  color: var(--accent-800);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

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

a {
  color: var(--accent-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover {
  color: var(--accent-800);
}

/* Lesbare Eingabefelder: dunkler Text, heller Hintergrund */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  color: #111827; /* gray-900 */
  background-color: #ffffff;
}