/* =========================================================================
   Neosmiles Design Tokens
   Brand palette extracted from the official identity. The system is built
   around a calm boutique-spa feel: airy whitespace, soft layered shadows,
   generous rounded corners, deep teal + warm coral accents.
   ========================================================================= */

:root {
	/* --- Brand core ----------------------------------------------------- */
	--c-teal: #027298;          /* primary */
	--c-sage: #85B688;          /* secondary - calm/nature */
	--c-coral: #F09D58;         /* accent - CTAs, warmth */
	--c-gold: #F3BD43;          /* highlight */
	--c-indigo: #505BA6;        /* support */
	--c-purple: #9064AC;        /* support */
	--c-gray: #737373;          /* neutral text-muted base */
	--c-ink: #0D2B33;           /* near-black, teal-tinted text */
	--c-white: #ffffff;

	/* --- Tints & shades (derived) -------------------------------------- */
	--c-teal-900: #012f3f;
	--c-teal-800: #024d68;
	--c-teal-700: #026383;
	--c-teal-600: #027298;
	--c-teal-300: #6fb7cc;
	--c-teal-100: #d6ecf2;
	--c-teal-50:  #eef7fa;

	--c-coral-700: #d97f33;
	--c-coral-600: #ec9450;
	--c-coral-500: #F09D58;
	--c-coral-200: #f9d8be;
	--c-coral-100: #fdeede;

	--c-sage-600: #6fa973;
	--c-sage-100: #e4f0e5;
	--c-gold-100: #fdf2d2;

	/* Soft aqua wash used behind hero / feature sections */
	--c-wash: linear-gradient(180deg, #f3fafc 0%, #eaf5f8 55%, #ffffff 100%);
	--c-wash-teal: linear-gradient(135deg, #024d68 0%, #027298 60%, #0a89aa 100%);

	/* --- Semantic aliases --------------------------------------------- */
	--color-bg: #ffffff;
	--color-surface: #ffffff;
	--color-surface-alt: #f5fafb;
	--color-text: var(--c-ink);
	--color-text-muted: #5a6b70;
	--color-border: #e4ebed;
	--color-primary: var(--c-teal);
	--color-primary-dark: var(--c-teal-800);
	--color-accent: var(--c-coral-500);
	--color-accent-dark: var(--c-coral-700);
	--color-on-primary: #ffffff;
	--color-on-accent: #3d2206;
	--color-focus: #F3BD43;

	/* --- Typography --------------------------------------------------- */
	--font-display: "Kanit", "Trebuchet MS", system-ui, sans-serif;
	--font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Fluid type scale (min .. max) */
	--fs-eyebrow: 0.8125rem;
	--fs-small: 0.875rem;
	--fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
	--fs-h4: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
	--fs-h3: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
	--fs-h2: clamp(1.875rem, 1.4rem + 2.1vw, 3rem);
	--fs-h1: clamp(2.4rem, 1.7rem + 3.4vw, 4.25rem);
	--fs-display: clamp(2.8rem, 1.8rem + 4.6vw, 5.25rem);

	--lh-tight: 1.08;
	--lh-heading: 1.18;
	--lh-body: 1.7;

	/* --- Spacing scale (8px base, fluid section rhythm) --------------- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
	--container: 1200px;
	--container-wide: 1380px;
	--container-narrow: 760px;
	--gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

	/* --- Radius ------------------------------------------------------- */
	--r-xs: 6px;
	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 24px;
	--r-xl: 36px;
	--r-pill: 999px;

	/* --- Shadows (soft, layered, teal-tinted) ------------------------ */
	--sh-xs: 0 1px 2px rgba(2, 47, 63, 0.06);
	--sh-sm: 0 4px 14px rgba(2, 47, 63, 0.07);
	--sh-md: 0 14px 34px rgba(2, 47, 63, 0.10);
	--sh-lg: 0 28px 60px rgba(2, 47, 63, 0.14);
	--sh-accent: 0 14px 30px rgba(240, 157, 88, 0.35);
	--sh-focus: 0 0 0 3px rgba(243, 189, 67, 0.6);

	/* --- Motion ------------------------------------------------------- */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--t-fast: 0.16s;
	--t-base: 0.28s;
	--t-slow: 0.55s;

	/* --- Z-index scale ------------------------------------------------ */
	--z-base: 1;
	--z-header: 100;
	--z-mobile-nav: 110;
	--z-float: 120;
	--z-a11y: 130;
	--z-modal: 200;

	/* --- Accessibility runtime knobs (set by a11y.js) ---------------- */
	--a11y-scale: 1;
}

/* Text-size accessibility steps (data attribute set pre-paint) */
html[data-text-scale="1"] { --a11y-scale: 1.12; }
html[data-text-scale="2"] { --a11y-scale: 1.25; }
html[data-text-scale="3"] { --a11y-scale: 1.4; }

/* High-contrast accessibility theme */
html[data-contrast="high"] {
	--color-bg: #ffffff;
	--color-surface: #ffffff;
	--color-surface-alt: #ffffff;
	--color-text: #000000;
	--color-text-muted: #1a1a1a;
	--color-border: #000000;
	--color-primary: #024d68;
	--color-accent: #9a4a00;
	--color-on-accent: #ffffff;
	--c-wash: #ffffff;
	--c-wash-teal: #013a4d;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--t-fast: 0.001s;
		--t-base: 0.001s;
		--t-slow: 0.001s;
	}
}