/**
 * P6 Design Tokens — Obsidian Gold (Commerce)
 * CONTRACT: C1 — locked. Do not add/rename tokens without KP approval.
 * Source: P6_Design_System_Spec.md §1–3
 *
 * FORBIDDEN combinations (WCAG 2.1 AA fail):
 * ❌ --champagne-gold text on --cream-white bg (2.13:1)
 * ❌ white text on --champagne-gold bg (2.27:1)
 * ❌ --ink-40 #8A8A93 on any light bg (DO NOT CREATE THIS TOKEN)
 */

:root {
  /* §1 — Colour tokens */
  --deep-black: #0D0D0F;
  --champagne-gold: #C6A36A;
  --gold-soft: #E3D2B4;
  --cream-white: #F6F2EA;
  --soft-beige: #E7DCCB;
  --medical-white: #FBFAF7;
  --deep-green: #244638;
  --ink: #0D0D0F;
  --ink-60: #54545C;
  --line: #E2DED4;
  --line-strong: #8A8477;
  --err: #A52A2A;
  --ok: #1E6B4E;
  --on-dark: #F6F2EA;
  --on-dark-muted: #C9C4BB;
  --on-dark-border: #8D887F;

  /* C1 v2 (15 ส.ค. 2026) — Design Spec §2 · ต้องมี KP approval ก่อนแก้ */
  --blood-red: #A52A2A;      /* แก้จาก #A32B32 ให้ตรง Brand Book · ใช้เฉพาะจุด (Red Flag/badge เตือน) ห้ามใช้เป็นสีปุ่มซื้อ */
  --soft-pink: #D8B7B1;      /* ผิว / ฝ้า / skincare — ⛔ ใช้เป็นพื้นหรือเส้นขอบเท่านั้น (เป็นตัวอักษรบน cream-white = 1.66:1) */
  --blue-grey: #6E7D8D;      /* ข้อมูลสุขภาพ / lab — ⚠️ + white ผ่านเฉพาะ large text (4.22:1) ห้ามใช้กับ body/caption */

  /* Hub accent — override ที่ body class ด้านล่าง */
  --hub-accent: #C6A36A;

  /* §2 — Typography */
  --font-thai: 'IBM Plex Sans Thai', sans-serif;
  --font-eng: 'Sora', sans-serif;

  /* Font sizes — STRICT: body ≥17px, caption ≥15px (absolute minimums) */
  --fs-display-mobile: 32px;
  --fs-display-desktop: 44px;
  --fs-h1-mobile: 28px;
  --fs-h1-desktop: 36px;
  --fs-h2-mobile: 23px;
  --fs-h2-desktop: 28px;
  --fs-h3-mobile: 19px;
  --fs-h3-desktop: 21px;
  --fs-body: 17px;        /* ⛔ NEVER below 17px */
  --fs-body-lg: 19px;
  --fs-caption: 15px;     /* ⛔ Absolute minimum */
  --fs-price-mobile: 30px;
  --fs-price-desktop: 34px;

  /* Line heights */
  --lh-display: 1.25;
  --lh-h1: 1.30;
  --lh-h2: 1.35;
  --lh-h3: 1.45;
  --lh-body: 1.75;
  --lh-caption: 1.60;
  --lh-price: 1.20;

  /* Font weights */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* §3 — Spacing scale (8px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Containers */
  --container-commerce: 560px;
  --container-content: 1120px;

  /* Grid */
  --grid-gutter-desktop: 24px;
  --grid-gutter-mobile: 16px;

  /* Sticky CTA */
  --sticky-cta-height: 72px;
  --sticky-cta-btn-height: 56px;
  --sticky-cta-shadow: 0 -2px 12px rgba(13, 13, 15, 0.10);
  --sticky-cta-scroll-trigger: 400;

  /* Focus */
  --focus-ring-color: #244638;
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Tap target */
  --tap-target-min: 48px;
  --btn-gap-min: 12px;
}

/* Hub accent mapping — Design Spec §2 (C1 v2) */
body.p6-hub--anti-aging      { --hub-accent: var(--deep-green); }
body.p6-hub--melasma-glow    { --hub-accent: var(--soft-pink); }
body.p6-hub--metabolic-nerve { --hub-accent: var(--blood-red); }