/* Base CSS Variables and Theme - TipsMate */
/* Base Layout CSS - Mobile First with Pastel Blue Theme */

/* CSS Reset and Base Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* CSS Variables for Consistency - Vibrant Ocean Theme */
:root {
	/* Main Color Palette */
	--green-blue: #095971; /* Deep ocean teal */
	--picton-blue: #1ba2d4; /* Vibrant bright blue */
	--verdigris: #73bfb8; /* Blue-green */
	--mikado-yellow: #fec601; /* Bright yellow */
	--pumpkin: #ea7317; /* Orange */

	/* Primary Colors */
	--primary-color: var(--picton-blue);
	--primary-dark: var(--green-blue);
	--primary-light: var(--verdigris);
	--primary-gradient: linear-gradient(
		135deg,
		#095971 0%,
		#1ba2d4 100%
	);
	--accent-color: var(--mikado-yellow);

	/* Status Colors */
	--success-color: var(--verdigris);
	--error-color: #ff6b6b; /* Softer red that works with palette */
	--warning-color: var(--mikado-yellow);

	/* Text Colors */
	--text-primary: #073a4b; /* Dark teal-blue for high premium contrast */
	--text-secondary: #334e58; /* Medium teal-gray */
	--text-light: #5d7e8a; /* Medium light gray-blue */

	/* Background Colors */
	--background: #f4f8fb;
	--surface: #ffffff; /* Very light blue-white */
	--background-light: #f0f9ff; /* Light blue tint */
	--background-gradient: linear-gradient(180deg, #f4f8fb 0%, #edf3f8 100%);

	/* Border Colors */
	--border: #cbd5e1; /* Light slate gray */
	--border-light: #e2e8f0; /* Very light slate gray */

	/* Typography */
	--font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
		Cantarell, "Helvetica Neue", sans-serif;
	--font-size-base: 16px;
	--font-size-sm: 14px;
	--font-size-lg: 18px;
	--font-size-xl: 24px;
	--line-height: 1.5;

	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-xxl: 3rem;

	/* Layout */
	--border-radius: 16px;
	--border-radius-lg: 24px;
	--border-radius-sm: 8px;
	--shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) calc(0.12 * 100%), transparent);
	--shadow-lg: 0 8px 24px color-mix(in srgb, var(--primary-color) calc(0.18 * 100%), transparent);

	/* Touch targets for mobile */
	--touch-target-min: 44px;
}

[data-theme="dark"] {
	--green-blue: #0ea5e9; /* Redefine to bright blue-teal for dark mode contrast */
	--background: #0f172a;
	--surface: #1e293b;
	--background-light: #1e293b;
	--background-gradient: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
	--text-primary: #f8fafc;
	--text-secondary: #cbd5e1;
	--text-light: #94a3b8;
	--border: #475569;
	--border-light: #334155;
	--shadow: 0 2px 8px color-mix(in srgb, #000 40%, transparent);
	--shadow-lg: 0 4px 16px color-mix(in srgb, #000 60%, transparent);
	--primary-color: #0c4a6e;
	--primary-dark: #082f49;
	--primary-light: #0ea5e9;
	--primary-gradient: linear-gradient(135deg, #082f49 0%, #134e4a 100%);
	--success-color: #134e4a;
	--warning-color: #d97706;
	--error-color: #b91c1c;

	--card-text: #cbd5e1;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--green-blue: #0ea5e9; /* Redefine to bright blue-teal for dark mode contrast */
		--background: #0f172a;
		--surface: #1e293b;
		--background-light: #1e293b;
		--background-gradient: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
		--text-primary: #f8fafc;
		--text-secondary: #cbd5e1;
		--text-light: #94a3b8;
		--border: #475569;
		--border-light: #334155;
		--shadow: 0 2px 8px color-mix(in srgb, #000 40%, transparent);
		--shadow-lg: 0 4px 16px color-mix(in srgb, #000 60%, transparent);
		--primary-color: #0c4a6e;
		--primary-dark: #082f49;
		--primary-light: #0ea5e9;
		--primary-gradient: linear-gradient(135deg, #082f49 0%, #134e4a 100%);
		--success-color: #134e4a;
		--warning-color: #d97706;
		--error-color: #b91c1c;

		--card-text: #cbd5e1;
	}
}

/* Shared Base Typography */
html, body {
	font-family: var(--font-family);
	color: var(--text-primary);
	background: var(--background-gradient);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}