111 lines
2.9 KiB
CSS
111 lines
2.9 KiB
CSS
@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;
|
||
}
|