/* =========================================================
   ZANCK — TYPOGRAPHY SYSTEM
   File: assets/css/typography.css

   Typography foundation for the entire ZANCK website.
   Font files:
   assets/fonts/primary/
   ========================================================= */


/* =========================================================
   FONT FACE — INTER
   ========================================================= */

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

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

@font-face {
    font-family: "Inter";
    src: url("../fonts/primary/Inter-SemiBold.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/primary/Inter-Bold.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/primary/Inter-Black.woff2")
        format("woff2");
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}


/* =========================================================
   HTML / BODY
   ========================================================= */

html {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
}

body {
    color: var(--color-text-primary);
    background-color: var(--color-background);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text-primary);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}


/* =========================================================
   HEADING SCALE
   ========================================================= */

h1 {
    font-size: clamp(
        3.5rem,
        7vw,
        7.5rem
    );

    font-weight: var(--font-weight-bold);
    line-height: 0.92;
    letter-spacing: var(--tracking-tighter);
}

h2 {
    font-size: clamp(
        2.5rem,
        5vw,
        5rem
    );

    font-weight: var(--font-weight-semibold);
    line-height: 1;
    letter-spacing: -0.055em;
}

h3 {
    font-size: clamp(
        1.5rem,
        2.5vw,
        2.25rem
    );

    font-weight: var(--font-weight-semibold);
    line-height: 1.1;
    letter-spacing: -0.035em;
}

h4 {
    font-size: clamp(
        1.25rem,
        2vw,
        1.75rem
    );

    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

h5 {
    font-size: 1.125rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    letter-spacing: -0.015em;
}

h6 {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    letter-spacing: 0;
}


/* =========================================================
   PARAGRAPHS
   ========================================================= */

p {
    color: var(--color-text-primary);
    font-size: 1rem;
    line-height: var(--line-height-relaxed);
}

p + p {
    margin-top: 1.25rem;
}


/* =========================================================
   LEAD TEXT
   ========================================================= */

.lead,
.text-lead {
    max-width: 760px;
    color: var(--color-text-secondary);
    font-size: clamp(
        1.125rem,
        1.5vw,
        1.375rem
    );
    line-height: 1.65;
}


/* =========================================================
   SMALL TEXT
   ========================================================= */

.small,
.text-small {
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.x-small,
.text-xs {
    font-size: var(--font-size-xs);
    line-height: 1.5;
}


/* =========================================================
   EYEBROW / LABEL
   ========================================================= */

.eyebrow {
    display: inline-block;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.eyebrow-light {
    color: #ffffff;
}


/* =========================================================
   BODY MUTED TEXT
   ========================================================= */

.text-muted {
    color: var(--color-text-secondary);
}

.text-subtle {
    color: var(--color-text-tertiary);
}

.text-inverse {
    color: var(--color-text-inverse);
}

.text-inverse-muted {
    color: var(--color-text-inverse-muted);
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    color: inherit;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-primary);
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}

.text-link img,
.text-link svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform var(--transition-base);
}

.text-link:hover img,
.text-link:hover svg {
    transform: translate(3px, -3px);
}


/* =========================================================
   STRONG / EMPHASIS
   ========================================================= */

strong,
b {
    font-weight: var(--font-weight-semibold);
}

em,
i {
    font-style: italic;
}


/* =========================================================
   MARK
   ========================================================= */

mark {
    padding: 0.05em 0.2em;
    background: var(--color-primary-light);
    color: var(--color-text-primary);
}


/* =========================================================
   LISTS
   ========================================================= */

.prose ul,
.prose ol {
    margin: 1.5rem 0;
    padding-left: 1.5rem;
}

.prose ul {
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.prose li {
    margin-bottom: 0.6rem;
    padding-left: 0.25rem;
    line-height: 1.7;
}

.prose li::marker {
    color: var(--color-primary);
}


/* =========================================================
   BLOCKQUOTE
   ========================================================= */

blockquote {
    margin: 2rem 0;
    padding: 1.5rem 0 1.5rem 1.5rem;
    border-left: 2px solid var(--color-primary);
    color: var(--color-text-secondary);
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.6;
}


/* =========================================================
   CODE
   ========================================================= */

code {
    padding: 0.15em 0.35em;
    border-radius: var(--radius-xs);
    background: var(--color-background-muted);
    color: var(--color-text-primary);
    font-size: 0.9em;
}

pre {
    padding: 1.5rem;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-background-dark);
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.7;
}

pre code {
    padding: 0;
    background: transparent;
    color: inherit;
}


/* =========================================================
   NUMBERS / TABULAR DATA
   ========================================================= */

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.numeric {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}


/* =========================================================
   DISPLAY TYPOGRAPHY
   ========================================================= */

.display-xl {
    font-size: clamp(4rem, 9vw, 9rem);
    line-height: 0.88;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.07em;
}

.display-lg {
    font-size: clamp(3.5rem, 7vw, 7rem);
    line-height: 0.9;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.065em;
}

.display-md {
    font-size: clamp(3rem, 5vw, 5rem);
    line-height: 0.95;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.055em;
}


/* =========================================================
   RESPONSIVE TYPOGRAPHY
   ========================================================= */

@media (max-width: 768px) {

    html {
        font-size: 15px;
    }

    h1 {
        font-size: clamp(
            3rem,
            12vw,
            5rem
        );
    }

    h2 {
        font-size: clamp(
            2.25rem,
            9vw,
            4rem
        );
    }

    h3 {
        font-size: clamp(
            1.5rem,
            6vw,
            2rem
        );
    }

    .lead,
    .text-lead {
        font-size: 1.1rem;
    }

    .display-xl {
        font-size: clamp(
            3.5rem,
            15vw,
            6rem
        );
    }

    .display-lg {
        font-size: clamp(
            3rem,
            13vw,
            5rem
        );
    }

    .display-md {
        font-size: clamp(
            2.5rem,
            10vw,
            4rem
        );
    }
}


/* =========================================================
   MOBILE TYPOGRAPHY
   ========================================================= */

@media (max-width: 480px) {

    html {
        font-size: 15px;
    }

    body {
        line-height: 1.55;
    }

    h1 {
        line-height: 0.94;
    }

    h2 {
        line-height: 1.02;
    }

    .eyebrow {
        font-size: 0.68rem;
        letter-spacing: 0.11em;
    }

    .lead,
    .text-lead {
        font-size: 1.05rem;
        line-height: 1.65;
    }
}


/* =========================================================
   PRINT TYPOGRAPHY
   ========================================================= */

@media print {

    body {
        color: #000000;
        background: #ffffff;
        font-size: 12pt;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        color: #000000;
    }

    a {
        color: #000000;
        text-decoration: underline;
    }

    .eyebrow {
        color: #000000;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .text-link img,
    .text-link svg {
        transition: none;
    }
}