/* ==========================================================================
   DTL Accounting — Typography
   Load order: tokens.css -> reset.css -> typography.css -> base.css
   Toàn bộ giá trị tham chiếu Typography Tokens trong tokens.css.
   Không hard-code font-size/font-weight/line-height trực tiếp ở component.
   ========================================================================== */

/* 1. Base */
html {
    font-family: var(--font-family-base);
    font-size: 100%; /* 1rem = 16px, tôn trọng cài đặt zoom/accessibility của người dùng */
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    line-height: var(--line-height-normal);
}

body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

/* 2. Heading scale
   Chỉ một h1 trên mỗi page (theo foundations/design_system.md).
   Line-height dùng --line-height-tight vì heading không cần readability
   dạng đoạn văn dài. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

h1 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
}

h2 {
    font-size: var(--font-size-2xl);
}

h3 {
    font-size: var(--font-size-xl);
}

h4 {
    font-size: var(--font-size-lg);
}

h5,
h6 {
    font-size: var(--font-size-md);
}

/* 3. Body text */
p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
}

/* Lead paragraph — dùng cho Contact Intro supporting copy và mô tả mở đầu section */
.text-lead {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

/* 4. Supporting text */
small,
.text-small {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-xs {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
}

/* 5. Link
   Underline chỉ hiện khi hover/focus để giữ giao diện sạch nhưng vẫn có
   affordance rõ ràng — hover/focus state là bắt buộc theo navigation.md/footer.md. */
a {
    color: var(--color-text-link);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
    color: var(--color-text-link-hover);
    text-decoration-color: currentColor;
}

a:focus-visible {
    outline: var(--focus-ring-width) var(--focus-ring-style) var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}

/* 6. Strong / emphasis */
strong,
b {
    font-weight: var(--font-weight-semibold);
}

/* 7. List — dùng cho nội dung dạng đoạn văn (VD: mô tả dịch vụ), không áp
   dụng cho navigation/breadcrumb (những nơi đó tự quản lý list-style ở component). */
ul:not([role]):not(.reset-list),
ol:not([role]):not(.reset-list) {
    padding-inline-start: var(--space-6);
}

li {
    line-height: var(--line-height-relaxed);
}

/* 8. Responsive typography note:
   --font-size-2xl và --font-size-3xl đã dùng clamp() ở tầng Primitive Token
   (tokens.css) nên tự động scale theo viewport mà không cần media query
   riêng ở đây (theo design_system.md mục 3). */