@tailwind base; @tailwind components; @tailwind utilities; /* ============================================================ ACCENT PRESETS Applied via data-accent="" on ============================================================ */ /* Default / Schaeffler Green */ :root, [data-accent="green"] { --color-accent: #00893d; --color-accent-hover: #006e31; --color-accent-light: #e6f4ec; --color-accent-text: #ffffff; } [data-accent="blue"] { --color-accent: #2563eb; --color-accent-hover: #1d4ed8; --color-accent-light: #dbeafe; --color-accent-text: #ffffff; } [data-accent="purple"] { --color-accent: #7c3aed; --color-accent-hover: #6d28d9; --color-accent-light: #ede9fe; --color-accent-text: #ffffff; } [data-accent="amber"] { --color-accent: #d97706; --color-accent-hover: #b45309; --color-accent-light: #fef3c7; --color-accent-text: #ffffff; } [data-accent="teal"] { --color-accent: #0d9488; --color-accent-hover: #0f766e; --color-accent-light: #ccfbf1; --color-accent-text: #ffffff; } /* ============================================================ LIGHT THEME (default) ============================================================ */ :root { /* Surfaces */ --color-bg-app: #f9fafb; --color-bg-surface: #ffffff; --color-bg-surface-hover: #f9fafb; --color-bg-muted: #f3f4f6; /* Text */ --color-text: #111827; --color-text-secondary: #4b5563; --color-text-muted: #9ca3af; --color-text-inverse: #ffffff; /* Borders */ --color-border: #e5e7eb; --color-border-light: #f3f4f6; /* Status — Success */ --color-status-success-bg: #dcfce7; --color-status-success-text: #166534; /* Status — Warning */ --color-status-warning-bg: #fef9c3; --color-status-warning-text: #854d0e; /* Status — Error */ --color-status-error-bg: #fee2e2; --color-status-error-text: #991b1b; /* Status — Info */ --color-status-info-bg: #dbeafe; --color-status-info-text: #1e40af; } /* ============================================================ DARK THEME Applied via .dark class on ============================================================ */ :root.dark { /* Surfaces */ --color-bg-app: #0f172a; --color-bg-surface: #1e293b; --color-bg-surface-hover: #334155; --color-bg-muted: #1e293b; /* Text */ --color-text: #f1f5f9; --color-text-secondary: #94a3b8; --color-text-muted: #64748b; --color-text-inverse: #0f172a; /* Borders */ --color-border: #334155; --color-border-light: #1e293b; /* Status — Success */ --color-status-success-bg: rgba(34, 197, 94, 0.15); --color-status-success-text: #4ade80; /* Status — Warning */ --color-status-warning-bg: rgba(234, 179, 8, 0.15); --color-status-warning-text: #facc15; /* Status — Error */ --color-status-error-bg: rgba(239, 68, 68, 0.15); --color-status-error-text: #f87171; /* Status — Info */ --color-status-info-bg: rgba(59, 130, 246, 0.15); --color-status-info-text: #60a5fa; } /* Dark accent-light overrides (rgba instead of solid pastel) */ :root.dark, :root.dark [data-accent="green"] { --color-accent-light: rgba(0, 137, 61, 0.15); } :root.dark [data-accent="blue"] { --color-accent-light: rgba(37, 99, 235, 0.15); } :root.dark [data-accent="purple"] { --color-accent-light: rgba(124, 58, 237, 0.15); } :root.dark [data-accent="amber"] { --color-accent-light: rgba(217, 119, 6, 0.15); } :root.dark [data-accent="teal"] { --color-accent-light: rgba(13, 148, 136, 0.15); } /* ============================================================ BASE LAYER ============================================================ */ @layer base { body { @apply antialiased; background-color: var(--color-bg-app); color: var(--color-text); transition: background-color 200ms ease, color 200ms ease; } /* Native color scheme for form controls */ :root { color-scheme: light; } :root.dark { color-scheme: dark; } /* Checkbox / radio accent color */ input[type="checkbox"], input[type="radio"] { accent-color: var(--color-accent); } } /* ============================================================ COMPONENT CLASSES ============================================================ */ @layer components { /* Buttons */ .btn { @apply inline-flex items-center gap-2 px-4 py-2 rounded-md font-medium text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed; } .btn-primary { @apply btn; background-color: var(--color-accent); color: var(--color-accent-text); --tw-ring-color: var(--color-accent); } .btn-primary:hover:not(:disabled) { background-color: var(--color-accent-hover); } .btn-secondary { @apply btn border; background-color: var(--color-bg-surface); color: var(--color-text-secondary); border-color: var(--color-border); --tw-ring-color: var(--color-accent); } .btn-secondary:hover:not(:disabled) { background-color: var(--color-bg-surface-hover); } .btn-danger { @apply btn bg-red-600 text-white hover:bg-red-700 focus:ring-red-500; } /* Cards */ .card { @apply rounded-lg border shadow-sm; background-color: var(--color-bg-surface); border-color: var(--color-border); } /* Badges */ .badge { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium; } .badge-green { @apply badge; background-color: var(--color-status-success-bg); color: var(--color-status-success-text); } .badge-yellow { @apply badge; background-color: var(--color-status-warning-bg); color: var(--color-status-warning-text); } .badge-red { @apply badge; background-color: var(--color-status-error-bg); color: var(--color-status-error-text); } .badge-blue { @apply badge; background-color: var(--color-status-info-bg); color: var(--color-status-info-text); } .badge-gray { @apply badge; background-color: var(--color-bg-muted); color: var(--color-text-secondary); } /* Input base — replaces repeated inline input patterns */ .input-base { @apply w-full px-3 py-2 rounded-md text-sm border focus:outline-none focus:ring-2 transition-colors; background-color: var(--color-bg-surface); color: var(--color-text); border-color: var(--color-border); --tw-ring-color: var(--color-accent); } .input-base::placeholder { color: var(--color-text-muted); } .input-base:focus { border-color: var(--color-accent); } /* Small input variant (used in admin tables) */ .input-sm { @apply px-2 py-1 rounded text-sm border focus:outline-none focus:ring-1 transition-colors; background-color: var(--color-bg-surface); color: var(--color-text); border-color: var(--color-border); --tw-ring-color: var(--color-accent); } .input-sm:focus { border-color: var(--color-accent); } }