/*
 * Design Tokens — tranamedu (Hệ thống quản lý hồ sơ chuyên môn)
 *
 * TUYỆT ĐỐI không hardcode màu/font/border-radius mới trong CSS component.
 * Mọi giá trị phải lấy từ file này.
 * Nếu cần biến mới, hỏi trước — không tự thêm vào đây.
 *
 * Phong cách đã chốt (xem CLAUDE.md mục 5, 8): tối giản, phẳng (flat),
 * không dùng gradient/shadow trang trí, viền mảnh (hairline border).
 * Màu trạng thái là NGỮ NGHĨA, dùng nhất quán cho mọi module (hồ sơ,
 * công việc phát sinh...): xanh lá = đã duyệt/hoàn thành, vàng/cam = chờ
 * duyệt/đang thực hiện, đỏ = cần chỉnh sửa/từ chối, xám = trung tính/chưa nộp.
 */

:root {

	/* =====================
	   Màu sắc (Color)
	   ===================== */

	/* Màu nền */
	--color-bg:            #ffffff;
	--color-bg-subtle:     #f7f8fa;
	--color-bg-muted:      #eef0f3;

	/* Màu chữ */
	--color-text:          #1a1d23;
	--color-text-muted:    #5a6270;
	--color-text-subtle:   #8b93a1;
	--color-text-inverse:  #ffffff;

	/* Màu chủ đạo (brand) — dùng cho nút chính, liên kết, trạng thái active */
	--color-primary:       #2563eb;
	--color-primary-hover: #1d4ed8;
	--color-primary-light: #dbeafe;

	/* Màu đường viền */
	--color-border:        #dde1e7;
	--color-border-strong: #b7bec9;

	/* Màu trạng thái ngữ nghĩa — dùng chung cho trạng thái hồ sơ VÀ công việc phát sinh */
	--color-success:       #16a34a; /* đã duyệt / đã hoàn thành */
	--color-success-light: #dcfce7;
	--color-warning:       #d97706; /* chờ duyệt / đang thực hiện */
	--color-warning-light: #fef3c7;
	--color-error:         #dc2626; /* cần chỉnh sửa / từ chối */
	--color-error-light:   #fee2e2;
	--color-neutral:       #6b7280; /* trung tính / chưa nộp / chưa bắt đầu */
	--color-neutral-light: #f3f4f6;
	--color-info:          #0891b2;
	--color-info-light:    #cffafe;

	/* =====================
	   Typography (Font)
	   ===================== */

	/* Be Vietnam Pro: sans-serif gốc tiếng Việt — dùng cho toàn bộ giao diện.
	   Đây là hệ thống quản trị/biểu mẫu, không cần font serif riêng cho nội dung dài. */
	--font-family-ui:      'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
	--font-family-mono:    'Courier New', Courier, monospace;

	--font-size-xs:        0.75rem;   /* 12px — chú thích, nhãn phụ */
	--font-size-sm:        0.875rem;  /* 14px — nội dung phụ, bảng dữ liệu */
	--font-size-base:      1rem;      /* 16px — nội dung chính */
	--font-size-md:        1.125rem;  /* 18px — tiêu đề nhỏ */
	--font-size-lg:        1.25rem;   /* 20px — tiêu đề mục */
	--font-size-xl:        1.5rem;    /* 24px — tiêu đề trang */
	--font-size-2xl:       1.875rem;  /* 30px — tiêu đề lớn */

	--font-weight-normal:  400;
	--font-weight-medium:  500;
	--font-weight-bold:    700;

	--line-height-tight:   1.25;
	--line-height-base:    1.6;
	--line-height-loose:   1.8;

	/* =====================
	   Khoảng cách (Spacing)
	   ===================== */

	--space-1:   0.25rem;   /*  4px */
	--space-2:   0.5rem;    /*  8px */
	--space-3:   0.75rem;   /* 12px */
	--space-4:   1rem;      /* 16px */
	--space-5:   1.25rem;   /* 20px */
	--space-6:   1.5rem;    /* 24px */
	--space-8:   2rem;      /* 32px */
	--space-10:  2.5rem;    /* 40px */
	--space-12:  3rem;      /* 48px */
	--space-16:  4rem;      /* 64px */

	/* =====================
	   Border Radius — nhất quán cho card/nút/input
	   ===================== */

	--radius-sm:   4px;   /* badge, tag trạng thái */
	--radius-base: 6px;   /* input, button */
	--radius-md:   10px;  /* card, panel */
	--radius-lg:   14px;  /* modal, khối lớn */
	--radius-full: 9999px; /* avatar tròn, pill */

	/* =====================
	   Đường viền (Border) — hairline, không dùng shadow để phân tách khối
	   ===================== */

	--border-width:        1px;
	--border-width-thick:  2px;
	--border-style:        solid;
	--border:              var(--border-width) var(--border-style) var(--color-border);
	--border-strong:       var(--border-width) var(--border-style) var(--color-border-strong);

	/* =====================
	   Hiệu ứng (Effects)
	   ===================== */

	--transition-fast:     all 0.15s ease;
	--transition-base:     all 0.25s ease;

	/* Shadow: CHỈ dùng cho lớp nổi tạm thời (dropdown, modal, popover),
	   KHÔNG dùng để trang trí card/button tĩnh — theo đúng phong cách flat đã chốt. */
	--shadow-overlay:      0 4px 16px rgba(16, 24, 40, 0.12);

	/* =====================
	   Layout
	   ===================== */

	--container-max:       960px;
	--container-wide:      1200px;
	--header-height:       64px;
	--sidebar-width:       240px;
}