/* =========================================
   BILLECTA AB BRAND PALETTE
   ========================================= */

/* Light Mode (Official Brand Colors) */
:root {
	/* -- Brand Colors -- */
	/* Primary Brand Color (Sherpa Blue) - Used for buttons, active states, heavy text */
	--brand-primary: #00454A;
	/* Secondary Brand Color (Black Squeeze) - Used for subtle backgrounds, sidebars */
	--brand-secondary: #EBF8F6;
	/* -- UI Backgrounds -- */
	--bg-primary: #FFFFFF;
	--bg-secondary: var(--brand-secondary); /* Minty white for cards */
	--bg-input: #FFFFFF;
	/* -- Text -- */
	--text-primary: #00454A; /* Using the deep brand teal for headings looks sharp */
	--text-body: #333333; /* Standard dark grey for long reading text */
	--text-muted: #667d80; /* Muted teal-grey */
	/* -- Borders -- */
	--border-color: #D0EBE8; /* Subtle minty border */
	/* -- Accents & Actions -- */
	--accent-color: #00454A;
	--accent-hover: #002e32; /* Even darker teal for hover */
	/* -- Status -- */
	--success-color: #28a745;
	--error-color: #dc3545;
	color-scheme: light;
}

/* Dark Mode Override */
[data-theme="dark"] {
	/* -- UI Backgrounds -- */
	--bg-primary: #121212;
	--bg-secondary: #1A2626; /* Dark grey with a tiny hint of teal tint */
	--bg-input: #2C3333;
	/* -- Text -- */
	--text-primary: #EBF8F6; /* The light brand mint color (perfect for dark mode headings) */
	--text-body: #d0d0d0;
	--text-muted: #8c9ea0;
	/* -- Borders -- */
	--border-color: #2C3E3E;
	/* -- Accents & Actions -- */
	/* The official #00454A is too dark for dark mode. 
       We use a "lightened" version of the brand teal for visibility. */
	--accent-color: #4DB8B0;
	--accent-hover: #70D1C9;
	color-scheme: dark;
}

/* =========================================
   APPLYING THE STYLES
   ========================================= */

body {
	background-color: var(--bg-primary);
	color: var(--text-body);
	font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	transition: background-color 0.3s ease, color 0.3s ease;
	margin: 0;
}

h1, h2, h3, h4 {
	color: var(--text-primary); /* Deep Teal in Light, Mint in Dark */
	margin-top: 0;
}

/* Buttons */
button, .btn {
	background-color: var(--accent-color);
	color: #ffffff; /* Text inside button is always white (unless accent is very light) */
	/* Exception: In dark mode, if the accent is very bright, you might want black text. 
       But #4DB8B0 is dark enough that white text still works well. */
	border: none;
	padding: 10px 20px;
	border-radius: 4px;
	cursor: pointer;
	font-weight: 600;
}

	button:hover {
		background-color: var(--accent-hover);
	}

/* Cards (e.g., "Settings" box) */
.card {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	padding: 20px;
}

/* Links */
a {
	color: var(--accent-color);
	text-decoration: none;
	font-weight: 500;
}