/* ==========================================================================
   Design tokens — HIS Core phòng khám đa khoa ngoại trú
   Đặc tả: ../13-ui-ux-design.md §3
   Mọi giá trị hình ảnh khai báo ở đây. Component không được dùng số cứng.
   ========================================================================== */

:root {
  /* ---- Chữ (§3.1) ---- */
  --font-sans: "Inter", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas, monospace;

  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-base:13px;   /* ★ chuẩn */
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 28px;

  --lh-tight: 1.25;
  --lh-normal: 1.45;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---- Khoảng cách — lưới 4px (§3.2) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* ---- Kích thước khung ---- */
  --h-header:      44px;
  --h-context-bar: 40px;
  --h-status-bar:  24px;
  --h-row:         30px;
  --h-row-compact: 26px;
  --h-control:     28px;
  --h-control-sm:  24px;

  --w-col-left:  260px;
  --w-col-right: 320px;
  --w-col-rail:  40px;

  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---- Màu (§3.3) ---- */
  --bg-app:      #f1f5f7;
  --bg-surface:  #ffffff;
  --bg-subtle:   #f7f9fa;
  --bg-hover:    #eef2f4;
  --bg-selected: #e0f2f1;
  --bg-inverse:  #16232b;
  --bg-scrim:    rgba(16, 35, 43, .42);

  --border:        #dde5e9;
  --border-strong: #c3ced4;

  --text-primary:   #16232b;
  --text-secondary: #5a6b75;
  --text-muted:     #8b9aa3;
  --text-inverse:   #ffffff;

  --primary:        #0f766e;
  --primary-hover:  #0d635c;
  --primary-active: #0a504a;
  --primary-subtle: #d7efec;
  --primary-border: #96d3cd;

  --success: #16794c;  --success-subtle: #d9f2e4;  --success-border: #9bd9bb;
  --warning: #a15c07;  --warning-subtle: #fdf0d5;  --warning-border: #e8c47a;
  --danger:  #b42318;  --danger-subtle:  #fde7e5;  --danger-border:  #f0a9a3;
  --info:    #175cd3;  --info-subtle:    #dbeafe;  --info-border:    #a4c6f7;
  --critical:#8b1a10;

  /* ---- Độ cao (§3.4) ---- */
  --shadow-sm:    0 1px 2px rgba(16,35,43,.06);
  --shadow-md:    0 4px 12px rgba(16,35,43,.10);
  --shadow-lg:    0 12px 32px rgba(16,35,43,.16);
  --shadow-modal: 0 24px 64px rgba(16,35,43,.24);

  --z-header: 100; --z-dropdown: 200; --z-drawer: 300;
  --z-modal: 400;  --z-toast: 500;    --z-critical-alert: 600;

  --transition-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --transition-base: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ---- Mật độ dày đặc (§10) ---- */
:root[data-density="compact"] {
  --h-row: 26px;
  --h-control: 26px;
  --sp-3: 10px;
  --sp-4: 12px;
}

/* ---- Chế độ chữ lớn — khả năng tiếp cận (§9) ---- */
:root[data-textsize="large"] {
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-base:15px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --h-row: 34px;
  --h-control: 32px;
}

/* ---- Chủ đề tối — phòng đọc CĐHA (§10) ---- */
:root[data-theme="dark"] {
  --bg-app:      #0d1519;
  --bg-surface:  #141f25;
  --bg-subtle:   #18252c;
  --bg-hover:    #1e2d35;
  --bg-selected: #10322f;
  --bg-inverse:  #e8eef1;
  --bg-scrim:    rgba(0, 0, 0, .62);

  --border:        #24343d;
  --border-strong: #34474f;

  --text-primary:   #e8eef1;
  --text-secondary: #9aabb4;
  --text-muted:     #6b7d87;
  --text-inverse:   #0d1519;

  --primary:        #2dd4bf;
  --primary-hover:  #5eead4;
  --primary-active: #99f6e4;
  --primary-subtle: #10322f;
  --primary-border: #1f5c56;

  --success: #4ade80;  --success-subtle: #10291d;  --success-border: #1d4d33;
  --warning: #fbbf24;  --warning-subtle: #2b2110;  --warning-border: #6b4e15;
  --danger:  #f87171;  --danger-subtle:  #2d1512;  --danger-border:  #6b2721;
  --info:    #60a5fa;  --info-subtle:    #121f33;  --info-border:    #24406b;
  --critical:#fca5a5;
}