/* =========================================================
   THEME: "Celadon" — Baan Sabai Spa
   Everything visual that changes between demos lives here.
   To re-theme: duplicate this file, change the values, and
   point index.html at the new file. main.css only reads
   these variables.
   ========================================================= */

:root {
  /* --- Palette (named after Thai celadon ware and teak) --- */
  --c-paper:        #EDEEE5;  /* page background: pale jade paper */
  --c-surface:      #F8F8F2;  /* cards, booking panel */
  --c-celadon:      #D3DDCB;  /* soft green surface, chips, map land */
  --c-celadon-deep: #5F7A63;  /* icons, rules, decorative lines */
  --c-pandan:       #2E4636;  /* primary buttons, dark band */
  --c-pandan-hover: #233829;
  --c-teak:         #33261C;  /* main text */
  --c-teak-soft:    #66574A;  /* secondary text (5.7:1 on paper) */
  --c-brass:        #7A5A24;  /* accent text, prices (5.4:1 on paper) */
  --c-brass-light:  #C4A46A;  /* accent on dark backgrounds */
  --c-line:         #CBD0BF;  /* hairlines, borders */
  --c-on-dark:      #EEF0E6;  /* text on pandan */
  --c-night:        #2B2019;  /* warm teak-brown: behind the hero photo and under hero text on phones */
  --hero-shade:     43 32 25; /* RGB of the shade behind hero text (no commas: used as rgb(var(--hero-shade) / .5)) */
  --c-error:        #9B2C1F;
  --c-line-brand:   #05803F;  /* LINE green, darkened for 5:1 contrast with white */
  --c-line-hover:   #046B34;
  --c-star:         #A97A1E;

  /* --- Typography --- */
  --font-display: "Marcellus", "Trirong", Georgia, serif;   /* Latin from Marcellus, Thai falls through to Trirong */
  --font-body:    "Anuphan", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   1.25rem;
  --fs-xl:   clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  --fs-2xl:  clamp(2.1rem, 1.4rem + 3.4vw, 3.6rem);
  --fs-hero: clamp(3.2rem, 1.6rem + 8vw, 7.5rem);

  --lh-body: 1.65;
  --lh-thai: 1.8;            /* Thai needs room for tone marks and vowels */
  --tracking-caps: 0.16em;

  /* --- Shape & space --- */
  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 28px;
  --radius-arch: 999px 999px 18px 18px;  /* arched window, like old Thai shophouses */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: clamp(3.5rem, 2rem + 6vw, 7rem);

  --container: 1180px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  --shadow-soft: 0 1px 2px rgb(51 38 28 / 0.05), 0 12px 32px -12px rgb(51 38 28 / 0.18);
  --focus-ring: 0 0 0 3px var(--c-paper), 0 0 0 5px var(--c-pandan);

  --ease: cubic-bezier(.2, .7, .2, 1);
}