/* AIH design tokens — derived from the AIH Brand Book / aih-ci skill.
   CSS custom properties only (no Tailwind). Light is primary; dark via [data-theme="dark"]. */

:root {
  /* ---- Brand palette (raw) ---- */
  --aih-pink: #F8C8CC;        /* New Dawn Pink — humanized care */
  --aih-green: #00B59D;       /* Growing/Hygiene Green — signature */
  --aih-green-deep: #00695C;  /* darkened green for AA text on light */
  --aih-fresh: #A0D37E;       /* Verdant Sky / Fresh Green */
  --aih-blue: #1781B8;        /* Future Blue */
  --aih-white: #F6F7F7;
  --aih-navy: #002545;
  --aih-gray: #383637;

  /* ---- Signature "Dawn of Healing Days" gradients ---- */
  --grad-dawn: linear-gradient(90deg, #F8C8CC 30%, #00B59D 100%);
  --grad-dawn-45: linear-gradient(45deg, #F8C8CC 0%, #00B59D 100%);
  --grad-sky: linear-gradient(90deg, #1781B8 70%, #00B59D 100%);

  /* ---- Semantic colours (light) ---- */
  --color-bg: #F6F7F7;
  --color-surface: #FFFFFF;
  --color-surface-2: #EEF1F1;
  --color-text: #002545;          /* navy — ~15:1 on bg */
  --color-text-muted: #4A5560;    /* AA on light */
  --color-border: rgb(0 37 69 / 0.12);
  --color-primary: #00B59D;       /* accents, focus, icons, large display */
  --color-link: #00695C;          /* AA-safe teal for body links */
  --color-accent-blue: #1781B8;
  --color-cta-bg: #002545;        /* navy button — AA with white text */
  --color-cta-text: #F6F7F7;
  --color-cta-bg-hover: #013a6b;
  --color-on-primary: #002545;    /* navy text on green surfaces */
  --color-error: #B3261E;
  --color-success: #00695C;
  --focus-ring: 0 0 0 3px rgb(0 181 157 / 0.45);

  /* ---- Type scale (fluid) ---- */
  --font-sans: "Google Sans", "Noto Sans Thai", "Noto Sans", Arial, Helvetica, sans-serif;
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);   /* 12–14 */
  --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 1rem);      /* 14–16 */
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);     /* 16–18 */
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);        /* 18–24 */
  --text-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);       /* 24–36 */
  --text-2xl: clamp(2rem, 1.4rem + 3vw, 3.5rem);           /* 32–56 hero */
  --leading-body: 1.65;
  --leading-tight: 1.18;
  --tracking-tight: -0.01em;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --section-y: clamp(3rem, 6vw, 6rem);

  /* ---- Layout ---- */
  --content-narrow: 640px;
  --content-default: 1080px;
  --content-wide: 1280px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgb(0 37 69 / 0.06), 0 1px 3px rgb(0 37 69 / 0.08);
  --shadow-md: 0 4px 12px rgb(0 37 69 / 0.08), 0 2px 4px rgb(0 37 69 / 0.06);
  --shadow-lg: 0 12px 32px rgb(0 37 69 / 0.12), 0 4px 8px rgb(0 37 69 / 0.06);
  --header-h: 72px;
}

[data-theme="dark"] {
  --color-bg: #001a32;
  --color-surface: #04263f;
  --color-surface-2: #0a3050;
  --color-text: #F6F7F7;
  --color-text-muted: #A9BAC6;
  --color-border: rgb(246 247 247 / 0.14);
  --color-primary: #2BD0BA;
  --color-link: #5FE0CD;
  --color-accent-blue: #54A8D8;
  --color-cta-bg: #00B59D;
  --color-cta-text: #002545;
  --color-cta-bg-hover: #2BD0BA;
  --color-on-primary: #002545;
  --color-error: #FF8A80;
  --color-success: #7FE0CF;
  --focus-ring: 0 0 0 3px rgb(43 208 186 / 0.5);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.45);
}