/* ==========================================================================
   DESIGN TOKENS — the ONLY place colours, fonts, sizes, radii and shadows
   are defined. Other CSS files must use var(--…) and never raw hex values.
   Full explanation: docs/03-design-system.md

   AesPlus rules: white background, light theme only (no dark mode),
   Prompt for headings, Sarabun for body, brand greens below.
   ========================================================================== */

:root {
	/* Brand greens (from the AesPlus logo) */
	--c-brand: #31b099;        /* main brand green — fills, lines, decoration (not small text) */
	--c-brand-600: #0e8d70;    /* accent text on white (large text), icons, bars */
	--c-brand-700: #0e6b58;    /* small accent text on white (passes 4.5:1) */
	--c-brand-800: #0f4941;    /* primary buttons, dark band */
	--c-brand-900: #01434a;    /* footer */
	--c-teal: #00a3a3;
	--c-mint-100: #eaf6f2;     /* soft tile background */
	--c-mint-50: #f5faf8;      /* tinted section background */
	--c-mint-on-dark: #9fe8d6; /* accent text on dark green */

	/* Neutrals */
	--c-bg: #ffffff;
	--c-ink: #0f2e2a;          /* headings */
	--c-text: #1d2e2b;         /* body */
	--c-muted: #4a5e5a;        /* secondary text (passes 4.5:1 on white) */
	--c-subtle: #5e716d;       /* captions */
	--c-line: #e3eeea;         /* borders */
	--c-line-strong: #cfe3dd;
	--c-skeleton: #d5e6e1;
	--c-old: #b9c4c1;          /* "old customers" in illustrations */
	--c-on-dark: #d6eee7;      /* body text on dark green */

	/* Supporting shades (use these instead of new hex values) */
	--c-white: #ffffff;
	--c-brand-750: #0e544a;    /* badge text */
	--c-mint-75: #eef8f5;      /* hero backdrop */
	--c-mint-bright: #7fe0cb;  /* small accents on dark green */
	--c-dots: #cfe8e0;         /* dotted pattern */
	--c-on-brand: #062e28;     /* text on --c-brand buttons */
	--c-ink-soft: #22403b;     /* nav links, list text */
	--c-text-2: #3d524e;       /* hero lead */
	--c-muted-2: #4f6460;      /* small UI labels */
	--c-line-soft: #dceae5;
	--c-surface-2: #f6faf9;    /* mock KPI boxes */
	--c-surface-3: #f2f7f5;    /* pills */
	--c-track: #eef4f2;        /* meter track */
	--c-thumb-1: #dcede8;
	--c-thumb-2: #e4efec;
	--c-on-dark-2: #cde9e1;
	--c-footer-text: #cfe7e1;
	--c-footer-muted: #a9ccc4;

	/* Clinic colours — ONLY for the small dot next to a clinic name */
	--c-clinic-daria: #1baf7a;
	--c-clinic-chaewon: #eb6834;
	--c-clinic-harmony: #e87ba4;
	--c-clinic-saijai: #eda100;
	--c-clinic-neutral: #78756a;

	/* Form states */
	--c-error: #b42318;          /* form error text / border (passes 4.5:1 on white) */

	/* Type */
	--font-head: "Prompt", "Noto Sans Thai", Tahoma, system-ui, sans-serif;
	--font-body: "Sarabun", "Noto Sans Thai", Tahoma, system-ui, sans-serif;
	--fs-xs: 0.8125rem;   /* 13px */
	--fs-sm: 0.9375rem;   /* 15px */
	--fs-md: 1.0625rem;   /* 17px — body */
	--fs-lg: 1.25rem;     /* 20px */
	--fs-h3: 1.375rem;    /* 22px */
	--fs-h2: clamp(1.7rem, 3.6vw, 2.75rem);
	--fs-h1: clamp(2.125rem, 5.4vw, 4.125rem);
	--lh-tight: 1.2;
	--lh-head: 1.3;
	--lh-body: 1.75;

	/* Space & layout */
	--container: 1200px;
	--container-narrow: 860px;
	--gutter: clamp(16px, 4vw, 40px);
	--section-y: clamp(64px, 8vw, 112px);
	--gap-sm: 12px;
	--gap: 24px;
	--gap-lg: 48px;

	/* Shape & depth */
	--r-sm: 12px;
	--r: 18px;
	--r-lg: 24px;
	--r-xl: 36px;
	--r-pill: 999px;
	--shadow-sm: 0 10px 24px rgba(15, 73, 65, 0.12);
	--shadow: 0 22px 44px rgba(15, 73, 65, 0.11);
	--shadow-lg: 0 30px 60px rgba(15, 73, 65, 0.14);

	/* Motion */
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur: 0.3s;

	/* Light theme only */
	color-scheme: light;
}