/* Tĩnh An Wellness — token nền của hệ thống thiết kế (Design System).
   Giá trị lấy nguyên từ gói "Tĩnh An Wellness Design System" (tokens/colors, typography, spacing, shape, semantic).
   Mọi file CSS khác (site, admin, consult, intake) dùng lại các biến ở đây, không tự đặt mã màu mới. */
:root {
  /* ---- màu thương hiệu ---- */
  --brown: #a87b58; --brown-dark: #8c6446; --brown-soft: #f6efe7;
  --olive: #585e48; --olive-soft: #eef0e8;
  --cream: #fffef6; --beige: #e6e6dc; --sand: #f4f1e8; --bg: #f4f2ee; --white: #ffffff;
  --ink: #2a2521; --ink-admin: #26211d; --muted: #7a746c; --muted-admin: #7b756d;
  --line: #e2ddd2; --line-admin: #e6e1d8; --line-soft: #efebe4;
  --footer-bg: #2e2622; --footer-ink: #cfc6ba; --footer-dim: #8f867a;
  --sidebar-bg: #2b2320; --sidebar-ink: #cfc5b8; --sidebar-dim: #a99d8e; --sidebar-foot: #251e1b;
  /* chữ ấm đặt trên nền ảnh tối hoặc nền ô-liu */
  --sand-ink: #e9d5c1; --cream-ink: #f0e9df; --olive-ink: #eceadf;
  --warm-hover: #fffaf3;   /* dòng lịch / hàng bảng khi rê chuột */
  --check-soft: #fff8ef;   /* ô đã tick */

  /* ---- màu trạng thái: chỉ dùng trong trang quản trị ---- */
  --ok: #3f7a3a; --ok-soft: #e8f1e5;
  --warn: #b7791f; --warn-soft: #fdf3df;
  --bad: #b3362d; --bad-soft: #fbe8e6;
  --info: #2f6f9f; --info-soft: #e5eef6;

  /* ---- hạng thẻ thành viên (app/cards.py) ---- */
  --tier-hoa: #b9a27b; --tier-hoa-soft: #efe8d8;
  --tier-tinh: #c9959a; --tier-tinh-soft: #f4e4e4;
  --tier-an: #2f7a73; --tier-an-soft: #dcecea;
  --tier-nhien: #2b2b2b; --tier-nhien-ink: #d9b97a; --tier-nhien-soft: #e3e0dc;

  /* ---- chữ ---- */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans-admin: "Inter", "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --sans-paper: "Nunito", "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --body-size: 16.5px; --body-weight: 300; --body-leading: 1.7;
  --admin-size: 14px; --admin-leading: 1.5;
  --h1: clamp(2rem, 4vw, 3.2rem); --h1-hero: clamp(2.6rem, 6vw, 4.4rem);
  --h2: clamp(1.7rem, 3vw, 2.4rem); --h3: 1.45rem; --h4: 1.1rem;
  --heading-weight: 500; --heading-leading: 1.2;
  --eyebrow-size: .72rem; --eyebrow-tracking: .22em; --eyebrow-weight: 500;
  --btn-size: .8rem; --btn-tracking: .06em;
  --meta-size: .85rem; --small-size: .78rem;
  --text-body: var(--ink); --text-muted: var(--muted); --text-display: var(--ink);
  --text-accent: var(--brown); --text-price: var(--brown-dark);

  /* ---- khoảng cách & khung ---- */
  --wrap: 1180px; --wrap-narrow: 760px; --wrap-apt: 1120px; --sidebar-w: 248px;
  --gutter: 2.5rem;
  --section-y: clamp(3rem, 7vw, 5.5rem);
  --grid-gap: 1.6rem; --grid-gap-tight: 1.3rem; --grid-gap-wide: 2.5rem;
  --card-pad: 1.4rem 1.5rem 1.6rem;
  --panel-pad: 1.1rem 1.25rem;
  --step-pad: 1.4rem 1.6rem 1.5rem;
  --content-pad: 1.4rem 1.8rem 3rem;

  /* ---- bo góc, đổ bóng, viền sáng ---- */
  --radius: 4px; --radius-admin: 12px; --radius-admin-sm: 8px; --radius-pill: 999px; --radius-card-art: 10px;
  --shadow: 0 10px 30px rgba(42, 37, 33, .08);
  --shadow-admin: 0 1px 2px rgba(38, 33, 29, .04), 0 6px 20px rgba(38, 33, 29, .05);
  --shadow-card-art: 0 12px 28px rgba(42, 37, 33, .18);
  --shadow-tier: 0 10px 24px rgba(0, 0, 0, .28);
  --border: 1px solid var(--line);
  --focus-ring: 2px solid rgba(168, 123, 88, .35);
  --focus-ring-olive: 0 0 0 3px rgba(88, 94, 72, .12);
  --focus-ring-admin: 3px solid rgba(168, 123, 88, .18);
  --ease: .2s;

  /* ---- vai trò bề mặt & hành động (semantic) ---- */
  --surface-page: var(--cream); --surface-alt: var(--sand); --surface-card: var(--white);
  --surface-band: var(--beige); --surface-accent: var(--olive); --surface-app: var(--bg); --surface-dark: var(--footer-bg);
  --action-primary: var(--brown); --action-primary-hover: var(--brown-dark); --action-primary-ink: #ffffff;
  --action-quiet-ink: var(--olive); --action-light: var(--cream);

  /* ---- lớp phủ ảnh ---- */
  --hero-scrim: linear-gradient(90deg, rgba(30,22,18,.72) 0%, rgba(30,22,18,.35) 55%, rgba(30,22,18,.1) 100%);
  --tile-scrim: linear-gradient(180deg, transparent 40%, rgba(30,22,18,.75));
  --tile-scrim-hover: linear-gradient(180deg, rgba(168,123,88,.1) 20%, rgba(30,22,18,.85));
}