/* =============================================================
   Last Update: 2026-06-30 02:51 PM (UTC+7)
   File: assets/frontend/css/token.css
   อ้อมกอด Nursing Home — Design Tokens
   -------------------------------------------------------------
   Art direction: "Engineered Warmth" — Forest green + warm copper + cream/sand.
   Scoped design system for the omkod home (layoutFrontendHome only).
   Loaded ONLY by layoutFrontendHome.php — does not affect the gold-theme
   news/content pages (those use tokens-frontend.css with --fe-* vars).
   ============================================================= */

:root {
  /* ---------- Brand color ---------- */
  --color-forest:        #31543D; /* primary green: headings, buttons, dark panels */
  --color-forest-deep:   #203524; /* footer / darkest green */
  --color-forest-dark:   #2B4832; /* large dark-green section panels */
  --color-chip:          #44634E; /* chips / sub-cards on dark green */

  --color-copper:        #B78355; /* terracotta accent: headings, price, icons, CTA */
  --color-copper-deep:   #9F6E3D; /* copper hover / pressed */

  --color-gold:          #F2D7A8; /* recommend badge, icon tiles, footer logo ring */
  --color-gold-soft:     #F3E6CC; /* light icon-tile background */

  /* ---------- Neutrals / surfaces ---------- */
  --color-cream:         #FCF6EA; /* header, lightest surface */
  --color-cream-card:    #FCF9F4; /* mini stat / soft cards */
  --color-sand:          #F6EFE1; /* page background */
  --color-sand-alt:      #FBF6EC; /* alternate section background */
  --color-hero-1:        #FCF6EA; /* hero gradient — light */
  --color-hero-2:        #EADEC9; /* hero gradient — warm beige */
  --color-white:         #FFFFFF;

  /* ---------- Text ---------- */
  --color-ink:           #2A2722; /* near-black warm */
  --color-heading:       #31543D; /* default heading (forest) */
  --color-body:          #6F685D; /* warm gray body */
  --color-on-dark:       #F3EBDD; /* text on green */
  --color-on-dark-soft:  #C7D2C4; /* muted text on green */

  /* ---------- Lines / borders ---------- */
  --border-soft:         rgba(49, 84, 61, 0.10);
  --border-card:         rgba(120, 90, 40, 0.10);
  --border-on-dark:      rgba(243, 235, 221, 0.14);

  /* ---------- Typography ---------- */
  --font-thai:  "Anuphan", "IBM Plex Sans Thai", system-ui, -apple-system, sans-serif;
  --font-serif: "Playfair Display", "Times New Roman", Georgia, serif;

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

  /* fluid type scale */
  --fs-hero:  clamp(2.75rem, 1.6rem + 5.4vw, 4.75rem);
  --fs-h2:    clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
  --fs-h3:    clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --fs-lead:  clamp(1rem, 0.96rem + 0.25vw, 1.15rem);
  --fs-body:  1rem;
  --fs-sm:    0.9rem;
  --fs-xs:    0.78rem;
  --fs-price: clamp(2.4rem, 1.8rem + 2.4vw, 3.1rem);

  --lh-tight:  1.12;
  --lh-snug:   1.3;
  --lh-normal: 1.7;

  /* ---------- Radius ---------- */
  --radius-pill: 999px;
  --radius-xl:   30px;
  --radius-lg:   24px;
  --radius-md:   18px;
  --radius-sm:   14px;

  /* ---------- Shadows ---------- */
  --shadow-soft: 0 28px 64px -30px rgba(49, 84, 61, 0.32);
  --shadow-card: 0 18px 40px -20px rgba(90, 66, 28, 0.22);
  --shadow-sm:   0 8px 22px -12px rgba(60, 45, 20, 0.20);
  --shadow-float:0 20px 44px -22px rgba(40, 50, 35, 0.35);

  /* ---------- Layout ---------- */
  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --section-y: clamp(4rem, 3rem + 5vw, 7rem);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.4s;
}