/**
 * ============================================
 * TYPOGRAPHY - QUY CHUẨN FONT CHO TOÀN BỘ SITE
 * ============================================
 * Mục tiêu: Đơn giản, dễ đọc, ít loạn
 */

/* ============================================
   1. BASE FONT SIZES
   ============================================ */
body {
    font-size: 16px; /* Base size */
    line-height: 1.6;
    color: #374151; /* gray-700 */
}

/* ============================================
   2. HEADINGS - CHỈ DÙNG 3 CẤP
   ============================================ */

/* H1: Tiêu đề trang chính */
h1, .text-h1 {
    font-size: 1.5rem;      /* 24px */
    font-weight: 600;       /* semibold - KHÔNG dùng bold (700) */
    color: #1f2937;         /* gray-800 */
    line-height: 1.3;
}

/* H2: Tiêu đề section lớn */
h2, .text-h2 {
    font-size: 1.25rem;     /* 20px */
    font-weight: 600;       /* semibold */
    color: #374151;         /* gray-700 */
    line-height: 1.4;
}

/* H3: Tiêu đề section nhỏ */
h3, .text-h3 {
    font-size: 1.125rem;    /* 18px */
    font-weight: 600;       /* semibold */
    color: #4b5563;         /* gray-600 */
    line-height: 1.4;
}

/* ============================================
   3. BODY TEXT - CHỈ 2 SIZE
   ============================================ */

/* Text thường (mặc định) */
.text-normal, p {
    font-size: 1rem;        /* 16px */
    font-weight: 400;       /* normal */
    color: #4b5563;         /* gray-600 */
}

/* Text nhỏ (chú thích, phụ) */
.text-small {
    font-size: 0.875rem;    /* 14px */
    font-weight: 400;       /* normal */
    color: #6b7280;         /* gray-500 */
}

/* ============================================
   4. EMPHASIS - CHỈ DÙNG KHI CẦN NHẤN MẠNH
   ============================================ */

/* Nhấn mạnh mức 1: Semibold (KHÔNG dùng bold) */
.text-emphasis, strong {
    font-weight: 600;       /* semibold */
}

/* Nhấn mạnh mức 2: Semibold + màu */
.text-emphasis-strong {
    font-weight: 600;       /* semibold */
    color: #1f2937;         /* gray-800 */
}

/* ============================================
   5. SPECIAL CASES - DANH SÁCH, LABEL
   ============================================ */

/* Label (Âm lịch:, Can chi:, ...) */
.label {
    font-size: 1rem;        /* 16px */
    font-weight: 400;       /* normal */
    color: #6b7280;         /* gray-500 */
}

/* Value (giá trị của label) */
.value {
    font-size: 1rem;        /* 16px */
    font-weight: 400;       /* normal */
    color: #374151;         /* gray-700 */
}

/* Value nhấn mạnh (Can Chi, Nạp Âm) */
.value-emphasis {
    font-size: 1rem;        /* 16px */
    font-weight: 600;       /* semibold */
}

/* Tên người (profile card) */
.profile-name {
    font-size: 1.125rem;    /* 18px */
    font-weight: 600;       /* semibold */
    color: #1f2937;         /* gray-800 */
}

/* Tuổi, thông tin phụ (profile card) */
.profile-meta {
    font-size: 0.875rem;    /* 14px */
    font-weight: 400;       /* normal */
    color: #6b7280;         /* gray-500 */
}

/* ============================================
   6. LIST ITEMS - SAO CÁT/HUNG
   ============================================ */

/* Số thứ tự */
.list-number {
    font-size: 1rem;        /* 16px */
    font-weight: 400;       /* normal */
    color: #9ca3af;         /* gray-400 */
}

/* Tên sao (Level 10: quan trọng nhất) */
.star-name-level10 {
    font-size: 1rem;        /* 16px */
    font-weight: 600;       /* semibold */
}

/* Tên sao (Level 3: quan trọng) */
.star-name-level3 {
    font-size: 1rem;        /* 16px */
    font-weight: 600;       /* semibold */
}

/* Tên sao (Level 1: bình thường) */
.star-name-level1 {
    font-size: 1rem;        /* 16px */
    font-weight: 400;       /* normal */
}

/* Mô tả sao */
.star-description {
    font-size: 1rem;        /* 16px */
    font-weight: 400;       /* normal */
    color: #6b7280;         /* gray-500 */
}

/* ============================================
   7. OVERRIDE TAILWIND (nếu cần)
   ============================================ */

/* Bỏ font-bold, chỉ dùng font-semibold */
.font-bold {
    font-weight: 600 !important; /* Chuyển bold → semibold */
}

/* ============================================
   8. RESPONSIVE (Mobile friendly)
   ============================================ */

@media (max-width: 768px) {
    /* Giảm nhẹ font size trên mobile */
    h1, .text-h1 {
        font-size: 1.375rem; /* 22px */
    }
    
    h2, .text-h2 {
        font-size: 1.125rem; /* 18px */
    }
    
    h3, .text-h3 {
        font-size: 1rem; /* 16px */
    }
}