/* ==========================================================
   UnlockPool Typography System
   Thai: IBM Plex Sans Thai
   Latin and numbers: IBM Plex Sans
========================================================== */

@import url(
    'https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'
);

:root {
    --up-font-ui:
        "IBM Plex Sans Thai",
        "IBM Plex Sans",
        "Noto Sans Thai",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --up-font-latin:
        "IBM Plex Sans",
        "IBM Plex Sans Thai",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --up-font-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;
}

/* ----------------------------------------------------------
   Base
---------------------------------------------------------- */

html,
body,
button,
input,
select,
textarea {
    font-family: var(--up-font-ui) !important;
}

body {
    font-weight: 400;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------
   Headings
---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.section-title,
.page-title,
[class*="hero"] h1,
[class*="hero"] h2,
[class*="section"] h2,
[class*="section"] h3 {
    font-family: var(--up-font-ui) !important;
    font-weight: 700;
    font-synthesis: none;
    text-wrap: balance;
}

h1,
.hero-title,
[class*="hero"] h1 {
    line-height: 1.08;
}

h2,
[class*="section"] h2 {
    line-height: 1.14;
}

h3,
h4 {
    line-height: 1.25;
}

/* ภาษาไทยไม่ควรบีบตัวอักษรแรงเหมือนภาษาอังกฤษ */
html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] h4,
html[lang="th"] .hero-title,
html[lang="th"] .section-title,
html[lang="th"] .page-title,
html[lang="th"] [class*="hero"] h1,
html[lang="th"] [class*="hero"] h2 {
    letter-spacing: -0.018em !important;
    line-height: 1.16;
}

/* ภาษาอังกฤษยังคงลักษณะกระชับแบบ Dashboard */
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] .hero-title,
html[lang="en"] .section-title {
    font-family: var(--up-font-latin) !important;
}

/* ----------------------------------------------------------
   Navigation
---------------------------------------------------------- */

header,
header nav,
header nav a,
nav,
nav a,
[class*="nav"],
[class*="nav"] a,
.up-language-switcher,
.up-language-button {
    font-family: var(--up-font-ui) !important;
}

header nav a,
[class*="nav"] a {
    font-weight: 500;
}

html[lang="th"] header nav a,
html[lang="th"] [class*="nav"] a {
    letter-spacing: 0 !important;
}

/* ----------------------------------------------------------
   Paragraphs and card content
---------------------------------------------------------- */

p,
li,
td,
th,
label,
small,
.card,
[class*="card"],
[class*="description"],
[class*="subtitle"],
[class*="summary"],
[class*="caption"],
[class*="note"] {
    font-family: var(--up-font-ui) !important;
}

p,
li,
[class*="description"],
[class*="summary"] {
    line-height: 1.68;
}

small,
[class*="eyebrow"],
[class*="kicker"],
[class*="label"],
[class*="badge"],
[class*="status"] {
    font-weight: 500;
}

/* ----------------------------------------------------------
   Numbers and metrics
---------------------------------------------------------- */

.metric-value,
.stat-value,
.card-value,
[class*="metric"] strong,
[class*="stat"] strong,
[class*="score"] strong,
[class*="value"] {
    font-family: var(--up-font-latin) !important;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------
   Technical values remain monospace
---------------------------------------------------------- */

code,
pre,
kbd,
samp,
.mono,
.monospace,
.hash,
.txid,
.address,
.fingerprint,
[class*="hash"],
[class*="txid"],
[class*="address"],
[class*="fingerprint"],
[data-mono="true"] {
    font-family: var(--up-font-mono) !important;
    font-variant-numeric: tabular-nums;
}

/* อย่าให้ป้ายสถานะที่บังเอิญใช้ class mono กลายเป็น monospace */
.badge.mono,
.status.mono,
[class*="badge"].mono,
[class*="status"].mono {
    font-family: var(--up-font-ui) !important;
}

/* ----------------------------------------------------------
   Buttons and controls
---------------------------------------------------------- */

button,
.button,
.btn,
a[class*="button"],
a[class*="btn"],
input,
select,
textarea {
    font-family: var(--up-font-ui) !important;
}

button,
.button,
.btn,
a[class*="button"],
a[class*="btn"] {
    font-weight: 600;
}

/* ----------------------------------------------------------
   Thai readability
---------------------------------------------------------- */

html[lang="th"] body {
    word-break: normal;
    overflow-wrap: break-word;
}

html[lang="th"] p,
html[lang="th"] li,
html[lang="th"] td,
html[lang="th"] th {
    line-height: 1.72;
}

html[lang="th"] .hero-title,
html[lang="th"] [class*="hero"] h1 {
    max-width: 22ch;
}

/* ----------------------------------------------------------
   Mobile
---------------------------------------------------------- */

@media (max-width: 760px) {
    html[lang="th"] h1,
    html[lang="th"] .hero-title,
    html[lang="th"] [class*="hero"] h1 {
        line-height: 1.2;
        letter-spacing: -0.012em !important;
    }

    html[lang="th"] h2 {
        line-height: 1.22;
    }

    header nav a,
    [class*="nav"] a {
        font-weight: 500;
    }
}