/* themes/drngocimplant/core/css/tokens.css
   DESIGN TOKENS — Dr Ngọc Implant (phong cách Nerio Medical Health)
   Giữ NGUYÊN tên biến --stch-* / --color-* để tương thích view fallback + widget Builder,
   nhưng đổi GIÁ TRỊ sang tông y tế: xanh teal tin cậy + trắng sạch + slate đậm. */

:root {
  /* 1. TYPOGRAPHY — sạch, dễ đọc, hỗ trợ tiếng Việt tốt (Be Vietnam Pro) */
  --stch-font-heading: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  --stch-font-body: 'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;

  --stch-font-display-lg: 3.25rem;
  --stch-font-display-md: 2.25rem;
  --stch-letter-spacing-tight: -0.02em;
  --stch-line-height-tight: 1.18;

  /* 2. COLORS — tông y tế (teal health + navy trust) */
  --nerio-teal: #0fa3ad;
  --nerio-teal-dark: #0b828b;
  --nerio-navy: #10344a;          /* xanh navy y khoa cho tiêu đề/nhấn */
  --nerio-accent: #ff7a59;        /* cam san hô ấm — CTA phụ/điểm nhấn nhẹ */
  --nerio-mint: #eaf7f7;          /* nền teal rất nhạt */

  --stch-primary: #0fa3ad;
  --stch-primary-container: #0b828b;
  --stch-on-primary: #ffffff;

  /* Background Hierarchy */
  --stch-surface: #ffffff;             /* nền trang */
  --stch-surface-low: #f2f8f9;         /* section xen kẽ (teal nhạt) */
  --stch-surface-lowest: #ffffff;      /* card nổi */

  --stch-on-surface: #16232b;          /* chữ chính (slate đậm) */
  --stch-on-surface-variant: #5b6f79;  /* chữ phụ */

  --stch-outline-ghost: rgba(15, 163, 173, 0.16); /* viền teal mờ */

  /* 3. SHAPES & ELEVATION */
  --stch-radius-full: 9999px;
  --stch-radius-lg: 20px;
  --stch-radius-md: 12px;
  --stch-radius-sm: 8px;

  --stch-shadow-ambient: 0 18px 40px rgba(16, 52, 74, 0.08);
  --stch-shadow-soft: 0 8px 24px rgba(16, 52, 74, 0.06);

  /* 4. MOTION */
  --stch-transition-kinetic: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --stch-hover-scale: scale(1.02);

  /* 5. Z-INDEX */
  --stch-z-header: 1050;
  --stch-z-modal: 1100;

  /* 6. MODULE-COMPATIBLE ALIASES (Builder widgets dùng --color-* / --primary) */
  --color-primary: var(--stch-primary);
  --color-primary-hover: var(--nerio-teal-dark);
  --color-primary-light: var(--nerio-mint);
  --color-text-primary: var(--stch-on-surface);
  --color-text-secondary: var(--stch-on-surface-variant);
  --color-surface: var(--stch-surface-lowest);
  --color-surface-alt: var(--stch-surface-low);
  --color-border: var(--stch-outline-ghost);
  --primary: var(--stch-primary);

  /* 7. SPACING SCALE (8px) */
  --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;  --sp-10: 128px;

  /* 8. TYPOGRAPHY SCALE */
  --fs-xs: 0.75rem;  --fs-sm: 0.875rem;  --fs-base: 1rem;  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;  --fs-2xl: 1.5rem;   --fs-3xl: 2rem;   --fs-4xl: 2.5rem;  --fs-5xl: 3.25rem;
}

/* Base Body — áp cho cả theme drngocimplant (và default nếu fallback) */
body.dmdc-theme-drngocimplant,
body.dmdc-theme-default {
  font-family: var(--stch-font-body);
  background-color: var(--stch-surface);
  color: var(--stch-on-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--stch-font-heading);
  letter-spacing: var(--stch-letter-spacing-tight);
  line-height: var(--stch-line-height-tight);
  color: var(--nerio-navy);
}

a { color: var(--stch-primary); }
a:hover { color: var(--nerio-teal-dark); }