/**
 * Design tokens — inspired by primeortho.in (navy + orange premium medical)
 * Includes layered section surfaces (mesh / dots / warm / cool / grid)
 */

:root {
	--ph-navy: #111d6a;
	--ph-navy-deep: #0b1448;
	--ph-navy-mid: #1f4e79;
	--ph-accent: #f77f00;
	--ph-accent-hot: #f97316;
	--ph-accent-dark: #e06a00;
	--ph-teal: #2ec4b6;
	--ph-ink: #1e293b;
	--ph-muted: #4a5568;
	--ph-soft: #f9fbfd;
	--ph-cream: #fff9f5;
	--ph-accent-soft: #fff4e8;
	--ph-white: #ffffff;
	--ph-line: #e8eef5;
	--ph-footer-bg: #0f1a4a;
	--ph-footer-text: #c5d0e0;
	--ph-orange: var(--ph-accent);
	--ph-brown: var(--ph-ink);
	--ph-text: var(--ph-ink);
	--ph-topbar-bg: var(--ph-navy);
	--ph-font: "Poppins", sans-serif;
	--ph-header-h: 160px;

	/* Subtle SVG patterns */
	--ph-pattern-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='2' cy='2' r='1.15' fill='%23111d6a' fill-opacity='0.07'/%3E%3C/svg%3E");
	--ph-pattern-dots-warm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='2' cy='2' r='1.15' fill='%23f77f00' fill-opacity='0.1'/%3E%3C/svg%3E");
	--ph-pattern-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M40 0H0V40' fill='none' stroke='%23111d6a' stroke-opacity='0.045' stroke-width='1'/%3E%3C/svg%3E");
	--ph-pattern-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 14v20M14 24h20' fill='none' stroke='%23111d6a' stroke-opacity='0.05' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	--ph-pattern-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2l24 14v28L28 58 4 44V16z' fill='none' stroke='%23111d6a' stroke-opacity='0.04' stroke-width='1'/%3E%3C/svg%3E");

	/* Cool mesh — soft navy / teal corners */
	--ph-surface-cool:
		var(--ph-pattern-dots),
		radial-gradient(ellipse 70% 55% at 0% 0%, rgba(17, 29, 106, 0.09), transparent 58%),
		radial-gradient(ellipse 55% 45% at 100% 100%, rgba(46, 196, 182, 0.1), transparent 55%),
		linear-gradient(180deg, #f4f7fc 0%, #f9fbfd 55%, #eef3f9 100%);

	/* Warm glow — cream + orange */
	--ph-surface-warm:
		var(--ph-pattern-dots-warm),
		radial-gradient(ellipse 65% 50% at 100% 0%, rgba(247, 127, 0, 0.12), transparent 55%),
		radial-gradient(ellipse 50% 40% at 0% 100%, rgba(255, 244, 232, 0.9), transparent 50%),
		linear-gradient(165deg, #fffaf5 0%, #fff6ee 45%, #f9fbfd 100%);

	/* Soft white mesh — light navy + orange accents */
	--ph-surface-mesh:
		var(--ph-pattern-plus),
		radial-gradient(ellipse 80% 60% at 10% -10%, rgba(17, 29, 106, 0.07), transparent 55%),
		radial-gradient(ellipse 60% 50% at 95% 90%, rgba(247, 127, 0, 0.08), transparent 50%),
		linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);

	/* Grid wash */
	--ph-surface-grid:
		var(--ph-pattern-grid),
		radial-gradient(ellipse 50% 40% at 50% 0%, rgba(17, 29, 106, 0.05), transparent 60%),
		linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

	/* Hex medical pattern */
	--ph-surface-hex:
		var(--ph-pattern-hex),
		radial-gradient(ellipse 70% 50% at 80% 20%, rgba(31, 78, 121, 0.07), transparent 55%),
		radial-gradient(ellipse 50% 40% at 10% 90%, rgba(247, 127, 0, 0.06), transparent 50%),
		linear-gradient(180deg, #f6f9fc 0%, #eef3f8 100%);

	/* Soft slant / diagonal */
	--ph-surface-slant:
		var(--ph-pattern-dots),
		linear-gradient(125deg, #ffffff 0%, #f3f7fc 38%, #fff5eb 72%, #f9fbfd 100%);

	/* Aura — stronger dual glow for feature blocks */
	--ph-surface-aura:
		radial-gradient(circle at 15% 20%, rgba(247, 127, 0, 0.1), transparent 35%),
		radial-gradient(circle at 85% 80%, rgba(17, 29, 106, 0.09), transparent 40%),
		radial-gradient(circle at 50% 50%, rgba(46, 196, 182, 0.05), transparent 55%),
		var(--ph-pattern-dots),
		linear-gradient(180deg, #f9fbfd 0%, #ffffff 100%);

	/* Homepage — stronger, clearly visible surfaces */
	--ph-home-cool:
		var(--ph-pattern-dots),
		radial-gradient(ellipse 90% 70% at -5% -10%, rgba(17, 29, 106, 0.16), transparent 55%),
		radial-gradient(ellipse 70% 60% at 105% 110%, rgba(46, 196, 182, 0.16), transparent 50%),
		radial-gradient(ellipse 40% 35% at 70% 20%, rgba(247, 127, 0, 0.08), transparent 50%),
		linear-gradient(180deg, #eef3fa 0%, #f7fafc 45%, #e8f0f8 100%);

	--ph-home-warm:
		var(--ph-pattern-dots-warm),
		radial-gradient(ellipse 85% 65% at 100% -5%, rgba(247, 127, 0, 0.2), transparent 52%),
		radial-gradient(ellipse 60% 50% at -5% 100%, rgba(255, 200, 140, 0.22), transparent 50%),
		radial-gradient(ellipse 45% 40% at 40% 60%, rgba(17, 29, 106, 0.05), transparent 55%),
		linear-gradient(160deg, #fff8f0 0%, #ffefd9 40%, #f5f8fc 100%);

	--ph-home-mesh:
		var(--ph-pattern-plus),
		radial-gradient(ellipse 75% 55% at 5% 0%, rgba(17, 29, 106, 0.14), transparent 55%),
		radial-gradient(ellipse 65% 55% at 100% 100%, rgba(247, 127, 0, 0.14), transparent 50%),
		linear-gradient(180deg, #ffffff 0%, #f0f5fb 55%, #eaf0f8 100%);

	--ph-home-hex:
		var(--ph-pattern-hex),
		radial-gradient(ellipse 80% 60% at 90% 10%, rgba(31, 78, 121, 0.14), transparent 52%),
		radial-gradient(ellipse 55% 45% at 5% 95%, rgba(247, 127, 0, 0.12), transparent 50%),
		linear-gradient(180deg, #eef4fb 0%, #f8fafc 50%, #e8eef7 100%);

	--ph-home-aura:
		radial-gradient(circle at 12% 18%, rgba(247, 127, 0, 0.18), transparent 32%),
		radial-gradient(circle at 88% 82%, rgba(17, 29, 106, 0.16), transparent 36%),
		radial-gradient(circle at 55% 40%, rgba(46, 196, 182, 0.1), transparent 40%),
		var(--ph-pattern-dots),
		linear-gradient(180deg, #f3f7fc 0%, #ffffff 55%, #eef4fa 100%);

	--ph-home-slant:
		var(--ph-pattern-grid),
		linear-gradient(128deg, #ffffff 0%, #eaf1fa 28%, #fff3e4 58%, #f0f6fc 82%, #ffffff 100%);
}

/* Optional utility classes if needed in markup */
.ph-surface--cool { background: var(--ph-surface-cool); }
.ph-surface--warm { background: var(--ph-surface-warm); }
.ph-surface--mesh { background: var(--ph-surface-mesh); }
.ph-surface--grid { background: var(--ph-surface-grid); }
.ph-surface--hex { background: var(--ph-surface-hex); }
.ph-surface--slant { background: var(--ph-surface-slant); }
.ph-surface--aura { background: var(--ph-surface-aura); }