notatest/web/src/app.css

@import "tailwindcss";

:root {
	--light-background: #f5f5f5;
	--light-foreground: #e0e0e0;
	--light-accent: #1e2400;
	--light-text: rgb(34, 40, 49);

	--dark-background: #181818;
	--dark-foreground: #222222;
	--dark-accent: #e0e2c2;
	--dark-text: rgb(238, 238, 238);
}

@layer base {
	body {
		@apply bg-[var(--light-background)] text-[var(--light-text)] transition-colors duration-200;
	}

	.dark body {
		@apply bg-[var(--dark-background)] text-[var(--dark-text)];
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		@apply font-medium text-[var(--light-text)];
	}

	.dark h1,
	.dark h2,
	.dark h3,
	.dark h4,
	.dark h5,
	.dark h6 {
		@apply text-[var(--dark-text)];
	}

	a {
		@apply text-[var(--light-accent)] transition-colors duration-200;
	}

	a:hover {
		@apply underline;
	}

	.dark a {
		@apply text-[var(--dark-accent)];
	}

	input,
	textarea,
	select {
		@apply rounded-lg border border-[var(--light-text)]/20 bg-[var(--light-foreground)] px-3 py-2 text-[var(--light-text)] transition-colors duration-200;
	}

	input:focus,
	textarea:focus,
	select:focus {
		@apply ring-2 ring-[var(--light-accent)] outline-none;
	}

	.dark input,
	.dark textarea,
	.dark select {
		@apply border-[var(--dark-text)]/20 bg-[var(--dark-foreground)] text-[var(--dark-text)];
	}

	.dark input:focus,
	.dark textarea:focus,
	.dark select:focus {
		@apply ring-[var(--dark-accent)];
	}

	button {
		@apply rounded-md bg-[var(--light-accent)] px-4 py-2 text-[var(--light-background)] transition-all duration-200;
	}

	button:hover {
		@apply bg-[var(--light-accent)]/80;
	}

	button:focus {
		@apply ring-2 ring-[var(--light-accent)]/50 outline-none;
	}

	button:disabled {
		@apply opacity-50;
	}

	.dark button {
		@apply bg-[var(--dark-accent)] text-[var(--dark-background)];
	}

	.dark button:hover {
		@apply bg-[var(--dark-accent)]/80;
	}

	.dark button:focus {
		@apply ring-[var(--dark-accent)]/50;
	}
}

/* Reusable component classes */
@layer components {
	.card {
		@apply rounded-lg bg-[var(--light-foreground)] p-6 shadow-md transition-colors duration-200;
	}

	.dark .card {
		@apply bg-[var(--dark-foreground)];
	}

	.form-group {
		@apply mb-4 space-y-2;
	}

	.form-label {
		@apply block text-sm font-medium text-[var(--light-text)];
	}

	.dark .form-label {
		@apply text-[var(--dark-text)];
	}

	/* Error messages */
	.error {
		@apply rounded-lg bg-red-100 p-3 text-sm text-red-500;
	}

	.dark .error {
		@apply bg-red-900/30 text-red-300;
	}

	/* Success messages */
	.success {
		@apply rounded-lg bg-green-100 p-3 text-sm text-green-500;
	}

	.dark .success {
		@apply bg-green-900/30 text-green-300;
	}

	.btn-primary {
		@apply bg-[var(--light-accent)] text-[var(--light-background)];
	}

	.dark .btn-primary {
		@apply bg-[var(--dark-accent)] text-[var(--dark-background)];
	}

	.btn-secondary {
		@apply border border-[var(--light-text)]/20 bg-[var(--light-foreground)] text-[var(--light-text)];
	}

	.dark .btn-secondary {
		@apply border-[var(--dark-text)]/20 bg-[var(--dark-foreground)] text-[var(--dark-text)];
	}

	.container-page {
		@apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
	}

	/* Sidebar specific classes */
	.sidebar {
		@apply fixed flex h-full w-64 flex-col overflow-hidden bg-[var(--light-foreground)] transition-all duration-300;
	}

	.sidebar-header,
	.sidebar-footer {
		@apply border-[var(--light-text)]/20 p-4;
	}

	.sidebar-header {
		@apply border-b;
	}

	.sidebar-footer {
		@apply border-t;
	}

	.sidebar-item {
		@apply cursor-pointer p-3 transition-colors hover:bg-[var(--light-background)];
	}

	.sidebar-item-active {
		@apply bg-[var(--light-background)];
	}

	.sidebar-item-text {
		@apply text-xs text-[var(--light-text)]/60;
	}

	.sidebar-divider {
		@apply divide-y divide-[var(--light-text)]/20;
	}

	/* Note editor specific classes */
	.note-title-input {
		@apply w-full border-b border-[var(--light-text)]/20 bg-transparent pb-2 text-2xl font-bold focus:border-[var(--light-accent)];
	}

	.note-char-count {
		@apply mt-1 text-xs text-[var(--light-text)]/60;
	}

	.note-textarea {
		@apply h-full min-h-[300px] w-full resize-none bg-[var(--light-background)] p-4 font-mono;
	}

	/* Settings modal specific classes */
	.modal-backdrop {
		/* @apply bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black; */
		@apply fixed inset-0 z-50 flex items-center justify-center bg-black;
	}

	.modal-content {
		@apply mx-4 max-h-[90vh] w-full max-w-md overflow-y-auto rounded-lg bg-[var(--light-background)] shadow-lg;
	}

	.modal-section {
		@apply border-b border-[var(--light-text)]/20 p-4;
	}

	.modal-close-button {
		@apply text-[var(--light-text)]/60 hover:text-[var(--light-text)];
	}

	/* Loading spinner specific classes */
	.spinner-dot {
		@apply bg-[var(--light-accent)];
	}

	/* Main layout classes */
	.main-header {
		@apply flex items-center justify-between bg-[var(--light-foreground)] p-4 shadow-sm;
	}

	.main-content {
		@apply flex-1 overflow-auto p-6;
	}
}