/* =====================================================================
   VINAMEDICAL — Design Tokens
   Toàn bộ biến nền tảng: màu, chữ, khoảng cách, bo góc, đổ bóng, chuyển động.
   Mọi file CSS khác CHỈ được dùng biến khai báo ở đây, không hard-code màu.
   ===================================================================== */

:root {
  /* ---------- 1. Thang màu thương hiệu ---------- */

  /* Primary — "Vina Blue": phát triển từ mã nhận diện gốc #099DCA */
  --vm-primary-50:  #eaf7fc;
  --vm-primary-100: #cdedf8;
  --vm-primary-200: #9fdcf1;
  --vm-primary-300: #66c6e7;
  --vm-primary-400: #2faeda;
  --vm-primary-500: #0c9dcb;
  --vm-primary-600: #0a7ea6;
  --vm-primary-700: #0c6482;
  --vm-primary-800: #10516a;
  --vm-primary-900: #123f52;
  --vm-primary-950: #0a2733;

  /* Accent — "Vina Red": phát triển từ mã nhận diện gốc #BF1F3C */
  --vm-accent-50:  #fdf2f5;
  --vm-accent-100: #fce3e9;
  --vm-accent-200: #f9c7d3;
  --vm-accent-300: #f296ab;
  --vm-accent-400: #e85f7e;
  --vm-accent-500: #d93659;
  --vm-accent-600: #bf1f3c;
  --vm-accent-700: #a0182f;
  --vm-accent-800: #85182b;
  --vm-accent-900: #711829;
  --vm-accent-950: #3f0912;

  /* Neutral — xám lạnh ngả xanh, hợp tông y tế */
  --vm-neutral-0:   #ffffff;
  --vm-neutral-50:  #f7f9fb;
  --vm-neutral-100: #eff3f7;
  --vm-neutral-200: #e1e8ef;
  --vm-neutral-300: #cbd6e0;
  --vm-neutral-400: #9aaabc;
  --vm-neutral-500: #6d8095;
  --vm-neutral-550: #5e7188;
  --vm-neutral-600: #4f627a;
  --vm-neutral-700: #3c4c61;
  --vm-neutral-800: #2a3746;
  --vm-neutral-900: #1b2530;
  --vm-neutral-950: #0e151d;

  /* Màu ngữ nghĩa */
  --vm-success-50:  #ecfdf5;
  --vm-success-500: #10b981;
  --vm-success-600: #059669;
  --vm-success-700: #047857;
  --vm-warning-50:  #fffbeb;
  --vm-warning-500: #f59e0b;
  --vm-warning-600: #d97706;
  --vm-warning-700: #b45309;
  --vm-danger-50:   #fef2f2;
  --vm-danger-500:  #ef4444;
  --vm-danger-600:  #dc2626;
  --vm-danger-700:  #b91c1c;
  --vm-info-50:     #eff6ff;
  --vm-info-500:    #3b82f6;
  --vm-info-600:    #2563eb;

  /* ---------- 2. Vai trò màu (light mode mặc định) ---------- */
  --vm-bg:            var(--vm-neutral-0);
  --vm-bg-subtle:     var(--vm-neutral-50);
  --vm-bg-muted:      var(--vm-neutral-100);
  --vm-bg-inverse:    var(--vm-neutral-950);
  --vm-surface:       var(--vm-neutral-0);
  --vm-surface-2:     var(--vm-neutral-50);
  --vm-surface-hover: var(--vm-neutral-100);

  --vm-text:          var(--vm-neutral-900);
  --vm-text-soft:     var(--vm-neutral-600);
  --vm-text-muted:    var(--vm-neutral-550);  /* 4.90:1 trên nền trắng - đạt WCAG AA */
  --vm-text-inverse:  var(--vm-neutral-0);
  --vm-text-on-brand: #ffffff;
  --vm-text-on-deep:  #eaf3f8;  /* chữ trên nền xanh đậm (.vm-section--dark, hero trang con) */
  --vm-text-on-deep-soft: rgba(234, 243, 248, 0.78);

  --vm-border:        var(--vm-neutral-200);
  --vm-border-strong: var(--vm-neutral-300);
  --vm-border-subtle: var(--vm-neutral-100);

  --vm-brand:         var(--vm-primary-600);
  --vm-brand-hover:   var(--vm-primary-700);
  --vm-brand-soft:    var(--vm-primary-50);
  --vm-brand-ring:    color-mix(in srgb, var(--vm-primary-500) 40%, transparent);

  --vm-cta:           var(--vm-accent-600);
  --vm-cta-hover:     var(--vm-accent-700);
  --vm-cta-soft:      var(--vm-accent-50);

  --vm-link:          var(--vm-primary-700);
  --vm-link-hover:    var(--vm-accent-600);

  /* Nền phủ / kính mờ */
  --vm-overlay:       color-mix(in srgb, var(--vm-neutral-950) 55%, transparent);
  --vm-glass:         color-mix(in srgb, var(--vm-neutral-0) 72%, transparent);
  --vm-glass-border:  color-mix(in srgb, var(--vm-neutral-0) 55%, transparent);

  /* Gradient dùng lại nhiều nơi */
  --vm-grad-brand:  linear-gradient(135deg, var(--vm-primary-600) 0%, var(--vm-primary-500) 45%, var(--vm-primary-400) 100%);
  --vm-grad-cta:    linear-gradient(135deg, var(--vm-accent-600) 0%, var(--vm-accent-500) 100%);
  --vm-grad-deep:   linear-gradient(135deg, var(--vm-primary-950) 0%, var(--vm-primary-800) 55%, var(--vm-primary-700) 100%);
  --vm-grad-sheen:  linear-gradient(120deg, transparent 15%, color-mix(in srgb, #fff 55%, transparent) 50%, transparent 85%);

  /* ---------- 3. Kiểu chữ ---------- */
  --vm-font-display: 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --vm-font-body:    'Inter', 'Be Vietnam Pro', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --vm-font-mono:    ui-monospace, 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;

  /* Thang cỡ chữ co giãn theo màn hình */
  --vm-text-2xs:  0.6875rem;                            /* 11px */
  --vm-text-xs:   0.75rem;                              /* 12px */
  --vm-text-sm:   0.875rem;                             /* 14px */
  --vm-text-base: 1rem;                                 /* 16px */
  --vm-text-md:   clamp(1.0625rem, 0.2vw + 1rem, 1.125rem);
  --vm-text-lg:   clamp(1.125rem, 0.4vw + 1rem, 1.3125rem);
  --vm-text-xl:   clamp(1.3125rem, 0.7vw + 1.1rem, 1.625rem);
  --vm-text-2xl:  clamp(1.5rem, 1.1vw + 1.2rem, 2rem);
  --vm-text-3xl:  clamp(1.75rem, 1.8vw + 1.3rem, 2.5rem);
  --vm-text-4xl:  clamp(2.125rem, 2.8vw + 1.4rem, 3.25rem);
  --vm-text-5xl:  clamp(2.5rem, 4vw + 1.5rem, 4.25rem);

  --vm-leading-tight:   1.12;
  --vm-leading-snug:    1.28;
  --vm-leading-normal:  1.7;   /* tối thiểu cho tiếng Việt có dấu */
  --vm-leading-relaxed: 1.85;

  --vm-tracking-tight: -0.02em;
  --vm-tracking-snug:  -0.011em;
  --vm-tracking-wide:  0.02em;
  --vm-tracking-caps:  0.09em;

  --vm-weight-normal: 400;
  --vm-weight-medium: 500;
  --vm-weight-semi:   600;
  --vm-weight-bold:   700;
  --vm-weight-black:  800;

  /* ---------- 4. Khoảng cách (thang 4px) ---------- */
  --vm-space-1:  0.25rem;
  --vm-space-2:  0.5rem;
  --vm-space-3:  0.75rem;
  --vm-space-4:  1rem;
  --vm-space-5:  1.25rem;
  --vm-space-6:  1.5rem;
  --vm-space-7:  1.75rem;
  --vm-space-8:  2rem;
  --vm-space-10: 2.5rem;
  --vm-space-12: 3rem;
  --vm-space-14: 3.5rem;
  --vm-space-16: 4rem;
  --vm-space-20: 5rem;
  --vm-space-24: 6rem;
  --vm-space-32: 8rem;

  /* Khoảng cách dọc giữa các section, co theo màn hình */
  --vm-section-y: clamp(3.5rem, 6vw, 6.5rem);
  --vm-section-y-sm: clamp(2.5rem, 4vw, 4rem);

  /* ---------- 5. Bố cục ---------- */
  --vm-container: 1280px;
  --vm-container-narrow: 920px;
  --vm-container-wide: 1480px;
  --vm-gutter: clamp(1rem, 3vw, 2rem);
  --vm-header-h: 76px;
  --vm-header-h-scrolled: 64px;
  --vm-topbar-h: 40px;

  /* ---------- 6. Bo góc ---------- */
  --vm-radius-xs: 4px;
  --vm-radius-sm: 8px;
  --vm-radius-md: 12px;
  --vm-radius-lg: 16px;
  --vm-radius-xl: 22px;
  --vm-radius-2xl: 30px;
  --vm-radius-pill: 999px;
  /* Bo góc riêng cho nhóm điều khiển - ngành y tế chuộng góc chặt */
  --vm-radius-control: 10px;
  --vm-radius-card: 14px;

  /* ---------- 7. Đổ bóng ---------- */
  --vm-shadow-line: 0 0 0 1px rgba(14, 21, 29, 0.07);
  --vm-shadow-xs: 0 1px 2px rgba(14, 21, 29, 0.05);
  --vm-shadow-sm: 0 1px 3px rgba(14, 21, 29, 0.07), 0 1px 2px rgba(14, 21, 29, 0.04);
  --vm-shadow-md: 0 4px 14px rgba(14, 21, 29, 0.08), 0 1px 3px rgba(14, 21, 29, 0.05);
  --vm-shadow-lg: 0 12px 32px rgba(14, 21, 29, 0.10), 0 4px 10px rgba(14, 21, 29, 0.05);
  --vm-shadow-xl: 0 24px 56px rgba(14, 21, 29, 0.14), 0 8px 18px rgba(14, 21, 29, 0.06);
  --vm-shadow-brand: 0 12px 30px color-mix(in srgb, var(--vm-primary-600) 26%, transparent);
  --vm-shadow-cta: 0 12px 30px color-mix(in srgb, var(--vm-accent-600) 28%, transparent);
  --vm-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --vm-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--vm-primary-500) 42%, transparent);

  /* ---------- 8. Chuyển động ---------- */
  --vm-dur-fast: 140ms;
  --vm-dur-base: 240ms;
  --vm-dur-slow: 420ms;
  --vm-dur-slower: 720ms;
  --vm-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --vm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --vm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- 9. Lớp chồng ---------- */
  --vm-z-base: 1;
  --vm-z-sticky: 100;
  --vm-z-header: 200;
  --vm-z-dropdown: 300;
  --vm-z-drawer: 400;
  --vm-z-modal: 500;
  --vm-z-toast: 600;
}

/* =====================================================================
   Chế độ tối — chỉ định nghĩa lại các biến vai trò, không đụng thang màu
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vm-bg:            var(--vm-neutral-950);
    --vm-bg-subtle:     #121b25;
    --vm-bg-muted:      #17222e;
    --vm-bg-inverse:    var(--vm-neutral-50);
    --vm-surface:       #141e29;
    --vm-surface-2:     #1a2634;
    --vm-surface-hover: #21303f;

    --vm-text:          #e8eef4;
    --vm-text-soft:     #a9bacb;
    --vm-text-muted:    #7e93a8;
    --vm-text-inverse:  var(--vm-neutral-950);

    --vm-border:        #253444;
    --vm-border-strong: #33475b;
    --vm-border-subtle: #1c2836;

    --vm-brand:         var(--vm-primary-400);
    --vm-brand-hover:   var(--vm-primary-300);
    --vm-brand-soft:    color-mix(in srgb, var(--vm-primary-500) 16%, transparent);

    --vm-cta:           var(--vm-accent-500);
    --vm-cta-hover:     var(--vm-accent-400);
    --vm-cta-soft:      color-mix(in srgb, var(--vm-accent-500) 16%, transparent);

    --vm-link:          var(--vm-primary-300);
    --vm-link-hover:    var(--vm-accent-300);

    --vm-overlay:       rgba(4, 8, 12, 0.72);
    --vm-glass:         color-mix(in srgb, #101a24 74%, transparent);
    --vm-glass-border:  color-mix(in srgb, #ffffff 10%, transparent);

    --vm-shadow-line: 0 0 0 1px rgba(255, 255, 255, 0.07);
    --vm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --vm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --vm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --vm-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);
    --vm-shadow-xl: 0 26px 60px rgba(0, 0, 0, 0.6);
    --vm-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}

/* Người dùng bấm nút chuyển sang tối — thắng cả cài đặt hệ thống */
:root[data-theme="dark"] {
  --vm-bg:            var(--vm-neutral-950);
  --vm-bg-subtle:     #121b25;
  --vm-bg-muted:      #17222e;
  --vm-bg-inverse:    var(--vm-neutral-50);
  --vm-surface:       #141e29;
  --vm-surface-2:     #1a2634;
  --vm-surface-hover: #21303f;

  --vm-text:          #e8eef4;
  --vm-text-soft:     #a9bacb;
  --vm-text-muted:    #7e93a8;
  --vm-text-inverse:  var(--vm-neutral-950);

  --vm-border:        #253444;
  --vm-border-strong: #33475b;
  --vm-border-subtle: #1c2836;

  --vm-brand:         var(--vm-primary-400);
  --vm-brand-hover:   var(--vm-primary-300);
  --vm-brand-soft:    color-mix(in srgb, var(--vm-primary-500) 16%, transparent);

  --vm-cta:           var(--vm-accent-500);
  --vm-cta-hover:     var(--vm-accent-400);
  --vm-cta-soft:      color-mix(in srgb, var(--vm-accent-500) 16%, transparent);

  --vm-link:          var(--vm-primary-300);
  --vm-link-hover:    var(--vm-accent-300);

  --vm-overlay:       rgba(4, 8, 12, 0.72);
  --vm-glass:         color-mix(in srgb, #101a24 74%, transparent);
  --vm-glass-border:  color-mix(in srgb, #ffffff 10%, transparent);

  --vm-shadow-line: 0 0 0 1px rgba(255, 255, 255, 0.07);
  --vm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --vm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --vm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --vm-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.55);
  --vm-shadow-xl: 0 26px 60px rgba(0, 0, 0, 0.6);
  --vm-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}