/* ── CSS Variables ───────────────────────────────────────────────────────────── */

:root {
    /* Colors */
    --color-primary:    #F0F2E4;
    --color-dark:       #141414;

    /* Typography */
    --font-family:      'Poppins', sans-serif;
    --letter-spacing:   -0.05em; /* -5% */

    /* Font sizes */
    --fs-h1:            80px;
    --fs-h2:            65px;
    --fs-body:          20px;

    /* Font weights */
    --fw-light:         300;
    --fw-regular:       400;
    --fw-semibold:      600;
    --fw-bold:          700;

    /* Opacity */
    --opacity-body:     0.8;
    --opacity-ui:       0.5;

    /* Header */
    --header-height:    120px;
    --header-pad-top:   40px;

    /* Font sizes — nav / footer */
    --fs-nav:           16px;
    --fs-footer:        13px;

    /* Spacing */
    --spacing-xs:       8px;
    --spacing-sm:       16px;
    --spacing-md:       32px;
    --spacing-lg:       64px;
    --spacing-xl:       120px;

    /* Grid */
    --grid-gap:         24px;
    --container-pad:    40px;
}


/* ── Reset ───────────────────────────────────────────────────────────────────── */

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

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

ul,
ol {
    list-style: none;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}


/* ── Base typography ─────────────────────────────────────────────────────────── */

body {
    font-family:      var(--font-family);
    font-weight:      var(--fw-light);
    font-size:        var(--fs-body);
    letter-spacing:   var(--letter-spacing);
    color:            var(--color-primary);
    /* Dark background — grain texture overlay added in layout.css via body::before */
    background-color: var(--color-dark);
    line-height:      1.5;
    /* Reserve space for the fixed header so content doesn't hide behind it */
    padding-top:      var(--header-height);
}

h1 {
    font-weight:    var(--fw-bold);
    font-size:      var(--fs-h1);
    letter-spacing: var(--letter-spacing);
    line-height:    1.05;
}

h2 {
    font-weight:    var(--fw-bold);
    font-size:      var(--fs-h2);
    letter-spacing: var(--letter-spacing);
    line-height:    1.1;
}

p {
    opacity: var(--opacity-body);
}