/* ==========================================================================
   BIZCA — Design tokens
   Sinh từ Figma: BIZCA Design System (Y6aLKm9LpU3K3WXNQbvZxN)
   Ngày 27/07/2026. KHÔNG sửa tay — sửa trên Figma rồi xuất lại.

   Tiền tố --bz- để tránh đụng biến của theme cha BuddyX và của WordPress.
   Chính xung đột tên biến là lý do brand-buddyx.css phải rải !important.

   Chỉ dùng nhóm "semantic" trong code. Nhóm "primitive" là nguyên liệu thô.
   ========================================================================== */

:root {

  /* Primitive — nguyên liệu thô, không dùng trực tiếp trong component */
  --bz-forest-50: #F1F6F4;
  --bz-forest-100: #E3EDE9;
  --bz-forest-200: #C4DAD2;
  --bz-forest-300: #8FB5A8;
  --bz-forest-400: #4E8674;
  --bz-forest-500: #2E6F5D;
  --bz-forest-600: #245A4C;
  --bz-forest-700: #1D4C40;
  --bz-forest-800: #173F35;
  --bz-forest-900: #0F2B24;
  --bz-green-50: #EBFAF2;
  --bz-green-100: #D6F4E6;
  --bz-green-200: #A9E9CA;
  --bz-green-300: #7FE0B2;
  --bz-green-400: #3FD08E;
  --bz-green-500: #00BF6F;
  --bz-green-600: #00A15D;
  --bz-green-700: #017A49;
  --bz-green-800: #026039;
  --bz-green-900: #024A2C;
  --bz-ivory-50: #FDFCFA;
  --bz-ivory-100: #FAF8F4;
  --bz-ivory-200: #F2EFE8;
  --bz-ivory-300: #E8E3D9;
  --bz-ivory-400: #D8D1C3;
  --bz-slate-200: #E2E8F0;
  --bz-slate-300: #CBD5E1;
  --bz-slate-400: #94A3B8;
  --bz-slate-500: #64748B;
  --bz-slate-600: #4A5568;
  --bz-slate-700: #334155;
  --bz-slate-900: #1A2233;
  --bz-base-white: #FFFFFF;
  --bz-base-black: #000000;
  --bz-success-100: #D1FAE5;
  --bz-success-500: #10B981;
  --bz-success-700: #047857;
  --bz-warning-100: #FEF3C7;
  --bz-warning-500: #F59E0B;
  --bz-warning-700: #92400E;
  --bz-danger-100: #FEE2E2;
  --bz-danger-500: #EF4444;
  --bz-danger-700: #991B1B;
  --bz-info-100: #DBEAFE;
  --bz-info-500: #3B82F6;
  --bz-info-700: #1E40AF;

  /* Semantic — dùng nhóm này trong mọi component */
  --bz-bg-canvas: var(--bz-ivory-100);
  --bz-bg-canvas-subtle: var(--bz-ivory-50);
  --bz-bg-surface: var(--bz-base-white);
  --bz-bg-surface-sunken: var(--bz-ivory-200);
  --bz-bg-surface-hover: var(--bz-ivory-50);
  --bz-bg-inverse: var(--bz-forest-800);
  --bz-bg-inverse-deep: var(--bz-forest-900);
  --bz-bg-inverse-soft: var(--bz-forest-600);
  --bz-bg-brand-subtle: var(--bz-forest-100);
  --bz-bg-accent-subtle: var(--bz-green-100);
  --bz-bg-accent: var(--bz-green-500);
  --bz-bg-overlay: var(--bz-forest-900);
  --bz-text-primary: var(--bz-slate-900);
  --bz-text-secondary: var(--bz-slate-600);
  --bz-text-muted: var(--bz-slate-500);
  --bz-text-disabled: var(--bz-slate-400);
  --bz-text-brand: var(--bz-forest-800);
  --bz-text-accent: var(--bz-green-700);
  --bz-text-accent-on-inverse: var(--bz-green-500);
  --bz-text-link: var(--bz-green-700);
  --bz-text-link-hover: var(--bz-forest-800);
  --bz-text-on-inverse: var(--bz-base-white);
  --bz-text-on-inverse-muted: var(--bz-slate-300);
  --bz-text-on-accent: var(--bz-forest-800);
  --bz-border-subtle: var(--bz-ivory-300);
  --bz-border-default: var(--bz-slate-200);
  --bz-border-strong: var(--bz-slate-300);
  --bz-border-inverse: var(--bz-forest-600);
  --bz-border-accent: var(--bz-green-500);
  --bz-border-focus: var(--bz-green-600);
  --bz-action-primary-bg: var(--bz-green-700);
  --bz-action-primary-bg-hover: var(--bz-green-800);
  --bz-action-primary-text: var(--bz-base-white);
  --bz-action-secondary-bg: var(--bz-forest-800);
  --bz-action-secondary-bg-hover: var(--bz-forest-700);
  --bz-action-secondary-text: var(--bz-base-white);
  --bz-action-ghost-text: var(--bz-forest-800);
  --bz-action-ghost-bg-hover: var(--bz-forest-50);
  --bz-action-outline-border: var(--bz-forest-800);
  --bz-action-disabled-bg: var(--bz-slate-200);
  --bz-action-disabled-text: var(--bz-slate-400);
  --bz-feedback-success-bg: var(--bz-success-100);
  --bz-feedback-success-text: var(--bz-success-700);
  --bz-feedback-success-border: var(--bz-success-500);
  --bz-feedback-warning-bg: var(--bz-warning-100);
  --bz-feedback-warning-text: var(--bz-warning-700);
  --bz-feedback-warning-border: var(--bz-warning-500);
  --bz-feedback-danger-bg: var(--bz-danger-100);
  --bz-feedback-danger-text: var(--bz-danger-700);
  --bz-feedback-danger-border: var(--bz-danger-500);
  --bz-feedback-info-bg: var(--bz-info-100);
  --bz-feedback-info-text: var(--bz-info-700);
  --bz-feedback-info-border: var(--bz-info-500);

  /* Spacing — lưới 4px */
  --bz-space-0: 0px;
  --bz-space-4: 4px;
  --bz-space-8: 8px;
  --bz-space-12: 12px;
  --bz-space-16: 16px;
  --bz-space-20: 20px;
  --bz-space-24: 24px;
  --bz-space-32: 32px;
  --bz-space-40: 40px;
  --bz-space-48: 48px;
  --bz-space-64: 64px;
  --bz-space-80: 80px;
  --bz-space-96: 96px;
  --bz-space-120: 120px;

  /* Radius — gộp từ 12 giá trị rời rạc đang chạy ngoài production */
  --bz-radius-sm: 6px;
  --bz-radius-md: 10px;
  --bz-radius-lg: 16px;
  --bz-radius-xl: 24px;
  --bz-radius-full: 999px;

  /* Size */
  --bz-border-width-hairline: 1px;
  --bz-border-width-thick: 2px;
  --bz-border-width-accent: 3px;
  --bz-control-height-sm: 36px;
  --bz-control-height-md: 44px;
  --bz-control-height-lg: 52px;
  --bz-icon-size-sm: 16px;
  --bz-icon-size-md: 20px;
  --bz-icon-size-lg: 24px;
  --bz-avatar-size-sm: 32px;
  --bz-avatar-size-md: 48px;
  --bz-avatar-size-lg: 72px;
  --bz-container-max: 1280px;
  --bz-container-prose: 720px;

  /* Typography */
  --bz-font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bz-font-mono: 'Roboto Mono', ui-monospace, 'Consolas', monospace;

  --bz-text-display-xl-size: 56px;   --bz-text-display-xl-lh: 1.20;
  --bz-text-display-l-size: 44px;    --bz-text-display-l-lh: 1.20;
  --bz-text-display-m-size: 34px;    --bz-text-display-m-lh: 1.25;
  --bz-text-heading-1-size: 36px;    --bz-text-heading-1-lh: 1.30;
  --bz-text-heading-2-size: 28px;    --bz-text-heading-2-lh: 1.35;
  --bz-text-heading-3-size: 22px;    --bz-text-heading-3-lh: 1.40;
  --bz-text-heading-4-size: 18px;    --bz-text-heading-4-lh: 1.50;
  --bz-text-body-large-size: 18px;   --bz-text-body-large-lh: 1.75;
  --bz-text-body-base-size: 16px;    --bz-text-body-base-lh: 1.75;
  --bz-text-body-small-size: 14px;   --bz-text-body-small-lh: 1.70;
  --bz-text-label-large-size: 16px;  --bz-text-label-large-lh: 1.40;
  --bz-text-label-base-size: 14px;   --bz-text-label-base-lh: 1.40;
  --bz-text-label-small-size: 12px;  --bz-text-label-small-lh: 1.40;
  --bz-text-overline-size: 12px;     --bz-text-overline-lh: 1.40;
  --bz-text-link-size: 16px;         --bz-text-link-lh: 1.75;
  --bz-text-mono-small-size: 13px;   --bz-text-mono-small-lh: 1.60;

  /* Elevation — nhuộm forest #173F35, không dùng đen.
     Bóng đen làm xám nền ngà và kéo cả trang về lại tông lạnh. */
  --bz-shadow-xs: 0 1px 2px rgba(23, 63, 53, 0.05);
  --bz-shadow-sm: 0 4px 12px rgba(23, 63, 53, 0.08);
  --bz-shadow-md: 0 8px 24px rgba(23, 63, 53, 0.10);
  --bz-shadow-lg: 0 16px 40px rgba(23, 63, 53, 0.15);
  --bz-focus-ring: 0 0 0 3px rgba(0, 191, 111, 0.35);
}

/* ==========================================================================
   Type ramp
   Line-height nới rộng cho dấu thanh tiếng Việt (ế, ộ, ữ, ẫ).
   Body 1.6 -> 1.75, heading 1.2 -> 1.25–1.5, hero 1.05 -> 1.2.
   ========================================================================== */

.bz-display-xl  { font-family: var(--bz-font-sans); font-size: var(--bz-text-display-xl-size);  line-height: var(--bz-text-display-xl-lh);  font-weight: 800; letter-spacing: -1.2px; }
.bz-display-l   { font-family: var(--bz-font-sans); font-size: var(--bz-text-display-l-size);   line-height: var(--bz-text-display-l-lh);   font-weight: 800; letter-spacing: -0.8px; }
.bz-display-m   { font-family: var(--bz-font-sans); font-size: var(--bz-text-display-m-size);   line-height: var(--bz-text-display-m-lh);   font-weight: 800; letter-spacing: -0.5px; }
.bz-heading-1   { font-family: var(--bz-font-sans); font-size: var(--bz-text-heading-1-size);   line-height: var(--bz-text-heading-1-lh);   font-weight: 700; letter-spacing: -0.5px; }
.bz-heading-2   { font-family: var(--bz-font-sans); font-size: var(--bz-text-heading-2-size);   line-height: var(--bz-text-heading-2-lh);   font-weight: 700; letter-spacing: -0.3px; }
.bz-heading-3   { font-family: var(--bz-font-sans); font-size: var(--bz-text-heading-3-size);   line-height: var(--bz-text-heading-3-lh);   font-weight: 700; }
.bz-heading-4   { font-family: var(--bz-font-sans); font-size: var(--bz-text-heading-4-size);   line-height: var(--bz-text-heading-4-lh);   font-weight: 600; }
.bz-body-large  { font-family: var(--bz-font-sans); font-size: var(--bz-text-body-large-size);  line-height: var(--bz-text-body-large-lh);  font-weight: 400; }
.bz-body-base   { font-family: var(--bz-font-sans); font-size: var(--bz-text-body-base-size);   line-height: var(--bz-text-body-base-lh);   font-weight: 400; }
.bz-body-small  { font-family: var(--bz-font-sans); font-size: var(--bz-text-body-small-size);  line-height: var(--bz-text-body-small-lh);  font-weight: 400; }
.bz-label-large { font-family: var(--bz-font-sans); font-size: var(--bz-text-label-large-size); line-height: var(--bz-text-label-large-lh); font-weight: 600; }
.bz-label-base  { font-family: var(--bz-font-sans); font-size: var(--bz-text-label-base-size);  line-height: var(--bz-text-label-base-lh);  font-weight: 600; }
.bz-label-small { font-family: var(--bz-font-sans); font-size: var(--bz-text-label-small-size); line-height: var(--bz-text-label-small-lh); font-weight: 600; }
.bz-overline    { font-family: var(--bz-font-sans); font-size: var(--bz-text-overline-size);    line-height: var(--bz-text-overline-lh);    font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.bz-link        { font-family: var(--bz-font-sans); font-size: var(--bz-text-link-size);        line-height: var(--bz-text-link-lh);        font-weight: 500; }
.bz-mono-small  { font-family: var(--bz-font-mono); font-size: var(--bz-text-mono-small-size);  line-height: var(--bz-text-mono-small-lh);  font-weight: 400; }

/* ==========================================================================
   Trợ năng — quy tắc bắt buộc

   #00BF6F trên nền trắng chỉ đạt 2.2:1 → KHÔNG BAO GIỜ dùng làm màu chữ.
     Nền sáng  -> var(--bz-text-accent)             #017A49, 5.4:1
     Nền tối   -> var(--bz-text-accent-on-inverse)  #00BF6F, 4.8:1
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--bz-border-focus);
  outline-offset: 2px;
  box-shadow: var(--bz-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}