@font-face {
    font-family: "Audiowide";
    src: url("../fonts/Audiowide-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Kanit";
    src: url("../fonts/Kanit-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Kanit";
    src: url("../fonts/Kanit-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-brand: #3b82f6;

    --color-bg: #333333;
    --color-heading: #f5f5f5;
    --color-text: #d1d5db;
    --color-muted: #a1a1aa;
    --color-border: #4a4a4a;

    --container-width: 1200px;
    --container-padding: 24px;

    --section-space: 120px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        "Kanit",
        system-ui,
        sans-serif;

    color: var(--color-text);
    background: var(--color-bg);

    line-height: 1.5;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

.container {
    width: min(
        calc(100% - (var(--container-padding) * 2)),
        var(--container-width)
    );

    margin-inline: auto;
}

.section {
    padding-block: var(--section-space);
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-heading);
}

h1,
h2,
.display-title {
    font-family: "Audiowide", sans-serif;
    font-weight: 400;
}

h3,
h4,
h5,
h6 {
    font-family: "Kanit", sans-serif;
    font-weight: 500;
}

/* ===== Typography refinement ===== */

body {
    letter-spacing: 0.012em;
    line-height: 1.65;
}

p {
    line-height: 1.7;
}

h1,
h2,
.display-title {
    letter-spacing: 0.015em;
}

h3,
h4,
h5,
h6 {
    letter-spacing: 0.01em;
    line-height: 1.3;
}

/* ===== Eyebrow refinement ===== */

.section-eyebrow,
.hero-eyebrow {
    font-size: 0.9rem;
    letter-spacing: 0.16em;
    line-height: 1.4;
}