/*
 * My Contact Profile — single shared colour system.
 *
 * This file is loaded on the public frontend and on wp-login.php.
 * Container, field, border and button colours must be changed here only.
 */

:root {
	--mcp-ink: #123228;
	--mcp-muted: #587267;

	/* Shared light surfaces: layered sage/green rather than white cards. */
	--mcp-container-bg: rgba(220, 238, 228, 0.94);
	--mcp-container-bg-alt: rgba(201, 228, 214, 0.94);
	--mcp-container-bg-highlight: rgba(235, 247, 240, 0.92);
	--mcp-container-background:
		radial-gradient(ellipse at 14% 8%, rgba(245, 252, 248, 0.70), transparent 34%),
		radial-gradient(ellipse at 90% 88%, rgba(182, 218, 200, 0.30), transparent 38%),
		linear-gradient(145deg, var(--mcp-container-bg-highlight) 0%, var(--mcp-container-bg) 52%, var(--mcp-container-bg-alt) 100%);
	--mcp-container-background-alt:
		radial-gradient(ellipse at 84% 14%, rgba(238, 249, 243, 0.62), transparent 32%),
		radial-gradient(ellipse at 10% 86%, rgba(169, 210, 190, 0.30), transparent 40%),
		linear-gradient(150deg, rgba(211, 233, 221, 0.95) 0%, rgba(193, 223, 208, 0.95) 100%);
	--mcp-container-bg-soft: rgba(180, 216, 197, 0.46);
	--mcp-container-border: rgba(36, 99, 77, 0.18);
	--mcp-field-bg: rgba(214, 234, 223, 0.94);
	--mcp-field-bg-hover: rgba(203, 229, 215, 0.97);
	--mcp-field-bg-focus: rgba(228, 242, 234, 0.99);
	--mcp-field-border: rgba(39, 99, 78, 0.22);
	--mcp-field-border-hover: rgba(24, 143, 106, 0.72);

	/* Backwards-compatible semantic aliases used by existing components. */
	--mcp-line: var(--mcp-container-border);
	--mcp-line-strong: var(--mcp-field-border);
	--mcp-surface: #e6f1eb;
	--mcp-page-background:
		radial-gradient(ellipse at 8% 14%, rgba(172, 214, 192, 0.33), transparent 30%),
		radial-gradient(ellipse at 88% 24%, rgba(206, 232, 219, 0.72), transparent 28%),
		radial-gradient(ellipse at 34% 78%, rgba(186, 220, 203, 0.34), transparent 34%),
		linear-gradient(180deg, #e7f2ec 0%, #dcece3 38%, #e9f3ee 69%, #dcebe3 100%);

	--mcp-brand: #117d60;
	--mcp-brand-strong: #075f47;
	--mcp-brand-soft: rgba(176, 223, 204, 0.52);
	--mcp-brand-rgb: 17, 125, 96;
	--mcp-blue: #267fa0;
	--mcp-focus: rgba(17, 125, 96, 0.24);
	--mcp-shadow: 0 24px 80px rgba(17, 67, 51, 0.10);
	--mcp-shadow-strong: 0 30px 90px rgba(9, 58, 42, 0.16);
	--mcp-header-bg: rgba(225, 239, 232, 0.88);
	--mcp-toggle-bg: rgba(207, 231, 218, 0.88);
	--mcp-toggle-icon: #17634f;
	--mcp-footer-bg: rgba(207, 230, 218, 0.88);
	--mcp-letter: 8, 105, 77;

	--mcp-button-bg: linear-gradient(145deg, #173f49 0%, #0f3039 52%, #081f29 100%);
	--mcp-button-bg-hover: linear-gradient(145deg, #1d4f5b 0%, #123b46 52%, #0a2833 100%);
	--mcp-button-border: #0a2c35;
	--mcp-button-border-hover: #061d25;
	--mcp-button-text: #f8fffd;
	--mcp-button-shadow: 0 11px 28px rgba(7, 39, 49, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	--mcp-button-shadow-hover: 0 15px 34px rgba(5, 31, 40, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.21);
	--mcp-button-secondary-bg: linear-gradient(145deg, #edf5f2 0%, #d7e8e1 58%, #c5dcd3 100%);
	--mcp-button-secondary-hover: linear-gradient(145deg, #f5faf8 0%, #e0eee9 58%, #cfe3dc 100%);
	--mcp-button-secondary-border: #477a70;
	--mcp-button-secondary-text: #153f39;
	--mcp-button-secondary-shadow: 0 9px 22px rgba(30, 82, 73, 0.14), inset 0 1px 0 rgba(255,255,255,.66);

	/* wp-login.php aliases: values still come from this one palette. */
	--mcp-login-ink: var(--mcp-ink);
	--mcp-login-muted: var(--mcp-muted);
	--mcp-login-line: var(--mcp-container-border);
	--mcp-login-card: var(--mcp-container-background);
	--mcp-login-field: var(--mcp-field-bg);
	--mcp-login-brand: var(--mcp-brand);
	--mcp-login-brand-strong: var(--mcp-brand-strong);
	--mcp-login-toggle: rgba(17, 59, 47, 0.08);
	--mcp-login-knob: #ffffff;
	--mcp-login-icon: #4c645c;
}

html[data-mcp-theme="dark"] {
	--mcp-ink: #effaf6;
	--mcp-muted: #b7d0c7;

	/* Exact deep-green Login surface family shared everywhere. */
	--mcp-container-bg: rgba(22, 62, 49, 0.97);
	--mcp-container-bg-alt: rgba(13, 43, 34, 0.96);
	--mcp-container-background: linear-gradient(155deg, var(--mcp-container-bg), var(--mcp-container-bg-alt));
	--mcp-container-background-alt: var(--mcp-container-background);
	--mcp-container-bg-highlight: var(--mcp-container-bg);
	--mcp-container-bg-soft: rgba(39, 91, 73, 0.34);
	--mcp-container-border: rgba(171, 241, 216, 0.22);
	--mcp-field-bg: rgba(34, 82, 65, 0.94);
	--mcp-field-bg-hover: rgba(39, 91, 73, 0.96);
	--mcp-field-bg-focus: rgba(42, 96, 77, 0.98);
	--mcp-field-border: rgba(164, 238, 212, 0.24);
	--mcp-field-border-hover: rgba(116, 240, 198, 0.72);

	--mcp-line: var(--mcp-container-border);
	--mcp-line-strong: var(--mcp-field-border);
	--mcp-surface: #06100d;
	--mcp-page-background: var(--mcp-surface);

	--mcp-brand: #69e6bd;
	--mcp-brand-strong: #9af5d5;
	--mcp-brand-soft: rgba(105, 230, 189, 0.12);
	--mcp-brand-rgb: 105, 230, 189;
	--mcp-blue: #72c7e5;
	--mcp-focus: rgba(105, 230, 189, 0.25);
	--mcp-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
	--mcp-shadow-strong: 0 32px 100px rgba(0, 0, 0, 0.50);
	--mcp-header-bg: rgba(5, 15, 12, 0.84);
	--mcp-toggle-bg: rgba(13, 34, 27, 0.82);
	--mcp-toggle-icon: #8ff1d1;
	--mcp-footer-bg: rgba(6, 17, 13, 0.90);
	--mcp-letter: 115, 255, 208;

	--mcp-button-bg: linear-gradient(145deg, #6d1d38 0%, #4a1024 52%, #270811 100%);
	--mcp-button-bg-hover: linear-gradient(145deg, #812743 0%, #5a152b 52%, #330a17 100%);
	--mcp-button-border: #a34d68;
	--mcp-button-border-hover: #cd6c8b;
	--mcp-button-text: #fff5f8;
	--mcp-button-shadow: 0 14px 34px rgba(62, 4, 24, 0.42), inset 0 1px 0 rgba(255, 226, 236, 0.13);
	--mcp-button-shadow-hover: 0 17px 40px rgba(73, 5, 29, 0.55), inset 0 1px 0 rgba(255, 226, 236, 0.15);
	--mcp-button-secondary-bg: linear-gradient(145deg, #541a30 0%, #38101f 56%, #210911 100%);
	--mcp-button-secondary-hover: linear-gradient(145deg, #68213a 0%, #471426 56%, #2b0b16 100%);
	--mcp-button-secondary-border: #8f405a;
	--mcp-button-secondary-text: #fff0f5;
	--mcp-button-secondary-shadow: 0 10px 26px rgba(55, 4, 22, .34), inset 0 1px 0 rgba(255,226,236,.10);

	--mcp-login-ink: var(--mcp-ink);
	--mcp-login-muted: var(--mcp-muted);
	--mcp-login-line: var(--mcp-container-border);
	--mcp-login-card: var(--mcp-container-background);
	--mcp-login-field: var(--mcp-field-bg);
	--mcp-login-brand: var(--mcp-brand);
	--mcp-login-brand-strong: var(--mcp-brand-strong);
	--mcp-login-toggle: rgba(209, 255, 240, 0.10);
	--mcp-login-knob: #17352c;
	--mcp-login-icon: #c5e7dc;
}