/* ============================================================
   Huapont — Fonts (Phase 2)
   ------------------------------------------------------------
   - Heading : Playfair Display (serif sang trọng, brand cao cấp)
   - Body    : Inter (sans-serif hiện đại, dễ đọc tiếng Việt)
   - Mono    : JetBrains Mono (dùng cho mã sản phẩm / SKU)

   @import trong file này để mọi layout chỉ cần include 1 file.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* -------- Font family tokens -------- */
:root {
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    'Helvetica Neue', Arial, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                    Consolas, monospace;

    /* -------- Type scale (rem) -------- */
    --fs-xs:   0.75rem;   /* 12 */
    --fs-sm:   0.875rem;  /* 14 */
    --fs-base: 1rem;      /* 16 */
    --fs-md:   1.125rem;  /* 18 */
    --fs-lg:   1.25rem;   /* 20 */
    --fs-xl:   1.5rem;    /* 24 */
    --fs-2xl:  1.875rem;  /* 30 */
    --fs-3xl:  2.25rem;   /* 36 */
    --fs-4xl:  3rem;      /* 48 */
    --fs-5xl:  3.75rem;   /* 60 */

    /* -------- Line height -------- */
    --lh-tight:   1.15;
    --lh-snug:    1.3;
    --lh-normal:  1.5;
    --lh-relaxed: 1.6;   /* alias dùng trong footer.css */
    --lh-loose:   1.75;

    /* -------- Letter spacing -------- */
    --ls-tight:  -0.01em;
    --ls-normal: 0;
    --ls-wide:   0.04em;
    --ls-wider:  0.08em;
    --ls-widest: 0.16em;
}

/* -------- Base document sizing -------- */
html {
    width: 100%;
    min-width: 320px;
    margin: 0;
    padding: 0;
    font-family: var(--font-display);
    font-size: 16px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: var(--font-display);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--color-text);
    font-weight: 400;
}

/* -------- Helper classes -------- */
.font-display { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--ls-tight); }
.font-sans    { font-family: var(--font-sans); }
.font-mono    { font-family: var(--font-mono); }
/* Heading scale thống nhất cho toàn site */
h1, .h1 { font-family: var(--font-display); font-size: var(--fs-4xl); line-height: var(--lh-tight); font-weight: 700; letter-spacing: var(--ls-tight); }
h2, .h2 { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: var(--lh-snug);  font-weight: 700; letter-spacing: var(--ls-tight); }
h3, .h3 { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: var(--lh-snug);  font-weight: 600; }
h4, .h4 { font-family: var(--font-display); font-size: var(--fs-xl);  line-height: var(--lh-snug);  font-weight: 600; }
h5, .h5 { font-family: var(--font-display); font-size: var(--fs-lg);  line-height: var(--lh-normal); font-weight: 600; }
h6, .h6 { font-family: var(--font-display); font-size: var(--fs-md);  line-height: var(--lh-normal); font-weight: 600; }

/* Eyebrow / label uppercase — dùng cho nav, section tag */
.eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Text tiện ích */
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }