/* =========================================================
   TEN ONE RESORT
   Typography System
   typography.css
   ========================================================= */


/* =========================================================
   1. BASE TYPOGRAPHY
   ========================================================= */

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text);

    letter-spacing: 0;
}


/* =========================================================
   2. HEADINGS
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-text-dark);

    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);

    letter-spacing: -0.02em;
}


/* =========================================================
   3. HEADING SCALE
   ========================================================= */

h1 {
    font-size: var(--font-size-6xl);
}

h2 {
    font-size: var(--font-size-5xl);
}

h3 {
    font-size: var(--font-size-4xl);
}

h4 {
    font-size: var(--font-size-3xl);
}

h5 {
    font-size: var(--font-size-2xl);
}

h6 {
    font-size: var(--font-size-xl);
}


/* =========================================================
   4. PARAGRAPHS
   ========================================================= */

p {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);

    line-height: var(--line-height-relaxed);

    color: var(--color-text-light);
}


/* =========================================================
   5. SMALL TEXT
   ========================================================= */

.text-xs {
    font-size: var(--font-size-xs);
    line-height: 1.4;
}

.text-sm {
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.text-base {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

.text-md {
    font-size: var(--font-size-md);
    line-height: 1.6;
}

.text-lg {
    font-size: var(--font-size-lg);
    line-height: 1.6;
}


/* =========================================================
   6. DISPLAY TYPOGRAPHY
   Used for large hero / section titles
   ========================================================= */

.display-xl {
    font-family: var(--font-heading);
    font-size: var(--font-size-7xl);

    font-weight: var(--font-weight-semibold);

    line-height: var(--line-height-tight);

    letter-spacing: -0.04em;

    color: var(--color-text-dark);
}

.display-lg {
    font-family: var(--font-heading);
    font-size: var(--font-size-6xl);

    font-weight: var(--font-weight-semibold);

    line-height: var(--line-height-tight);

    letter-spacing: -0.035em;

    color: var(--color-text-dark);
}

.display-md {
    font-family: var(--font-heading);
    font-size: var(--font-size-5xl);

    font-weight: var(--font-weight-semibold);

    line-height: var(--line-height-tight);

    letter-spacing: -0.03em;

    color: var(--color-text-dark);
}


/* =========================================================
   7. BRAND / DECORATIVE TYPOGRAPHY
   ========================================================= */

.text-script {
    font-family:
        var(--font-heading);

    font-style: italic;

    font-weight: var(--font-weight-medium);

    color: var(--color-primary);
}


/* =========================================================
   8. EYEBROW / SECTION LABELS
   ========================================================= */

.eyebrow {
    display: inline-flex;

    align-items: center;
    gap: var(--space-2);

    font-family: var(--font-body);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

    line-height: 1.3;

    letter-spacing: 0.16em;

    text-transform: uppercase;

    color: var(--color-primary-light);
}


/* Optional decorative line */
.eyebrow::before {
    content: "";

    display: inline-block;

    width: 28px;
    height: 1px;

    background-color: currentColor;
}


/* =========================================================
   9. NAVIGATION TYPOGRAPHY
   ========================================================= */

.nav-link {
    font-family: var(--font-body);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-medium);

    line-height: 1.2;

    letter-spacing: 0.01em;
}


/* =========================================================
   10. BUTTON TYPOGRAPHY
   ========================================================= */

.btn {
    font-family: var(--font-body);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

    line-height: 1;

    letter-spacing: 0.01em;

    white-space: nowrap;
}


/* =========================================================
   11. HERO TYPOGRAPHY
   ========================================================= */

.hero-eyebrow-text {
    font-family: var(--font-body);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

    line-height: 1.2;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


.hero-title {
    font-family: var(--font-heading);

    font-size: var(--font-size-7xl);

    font-weight: var(--font-weight-semibold);

    line-height: 0.9;

    letter-spacing: -0.035em;
}


.hero-subtitle p {
    font-family: var(--font-script);

    font-size: 2.35rem;

    font-weight: 400;

    font-style: normal;

    line-height: 1;

    letter-spacing: 0;

    color: var(--color-primary-light);
}


.hero-description {
    font-family: var(--font-body-strong);

    font-size: 1.12rem;

    font-weight: 500;

    line-height: 1.75;

    letter-spacing: -0.01em;

    color: var(--color-text-dark);
}

.hero-location {
    font-family: var(--font-body);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-medium);

    line-height: 1.3;
}


.hero-highlight {
    font-family: var(--font-body);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-medium);

    line-height: 1.3;
}


.hero-scroll-indicator {
    font-family: var(--font-body);

    font-size: var(--font-size-xs);

    font-weight: var(--font-weight-medium);

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


/* =========================================================
   12. SECTION TITLE HELPERS
   ========================================================= */

.section-title {
    max-width: 800px;

    font-family: var(--font-heading);

    font-size: var(--font-size-5xl);

    font-weight: var(--font-weight-semibold);

    line-height: var(--line-height-tight);

    letter-spacing: -0.03em;

    color: var(--color-text-dark);
}


.section-description {
    max-width: 680px;

    font-family: var(--font-body);

    font-size: var(--font-size-md);

    font-weight: var(--font-weight-regular);

    line-height: var(--line-height-relaxed);

    color: var(--color-text-light);
}


/* =========================================================
   13. CARD TYPOGRAPHY
   ========================================================= */

.card-title {
    font-family: var(--font-heading);

    font-size: var(--font-size-xl);

    font-weight: var(--font-weight-semibold);

    line-height: 1.25;

    color: var(--color-text-dark);
}


.card-text {
    font-family: var(--font-body);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-regular);

    line-height: var(--line-height-relaxed);

    color: var(--color-text-light);
}


/* =========================================================
   14. FORM TYPOGRAPHY
   ========================================================= */

label {
    font-family: var(--font-body);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

    line-height: 1.3;

    color: var(--color-text-dark);
}


input,
textarea,
select {
    font-family: var(--font-body);

    font-size: var(--font-size-base);

    font-weight: var(--font-weight-regular);

    line-height: 1.4;
}


/* =========================================================
   15. QUOTES
   ========================================================= */

.quote {
    font-family: var(--font-heading);

    font-size: var(--font-size-3xl);

    font-weight: var(--font-weight-medium);

    font-style: italic;

    line-height: 1.35;

    color: var(--color-primary);
}


/* =========================================================
   16. FOOTER TYPOGRAPHY
   ========================================================= */

.footer-title {
    font-family: var(--font-heading);

    font-size: var(--font-size-xl);

    font-weight: var(--font-weight-semibold);

    line-height: 1.25;

    color: var(--color-white);
}


.footer-text {
    font-family: var(--font-body);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-regular);

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.72);
}


.footer-link {
    font-family: var(--font-body);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-regular);

    line-height: 1.5;

    color: rgba(255, 255, 255, 0.75);
}


/* =========================================================
   17. TEXT COLORS
   ========================================================= */

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

.text-primary-light {
    color: var(--color-primary-light);
}

.text-water {
    color: var(--color-water-dark);
}

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

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

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

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


/* =========================================================
   18. FONT WEIGHT UTILITIES
   ========================================================= */

.fw-regular {
    font-weight: var(--font-weight-regular);
}

.fw-medium {
    font-weight: var(--font-weight-medium);
}

.fw-semibold {
    font-weight: var(--font-weight-semibold);
}

.fw-bold {
    font-weight: var(--font-weight-bold);
}


/* =========================================================
   19. TEXT ALIGNMENT
   ========================================================= */

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}


/* =========================================================
   20. TEXT TRANSFORM
   ========================================================= */

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.lowercase {
    text-transform: lowercase;
}


/* =========================================================
   21. TEXT WRAPPING
   ========================================================= */

.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}


/* =========================================================
   22. RESPONSIVE TYPOGRAPHY
   ========================================================= */

@media (max-width: 1024px) {

    h1 {
        font-size: var(--font-size-5xl);
    }

    h2 {
        font-size: var(--font-size-4xl);
    }

    h3 {
        font-size: var(--font-size-3xl);
    }

    .display-xl {
        font-size: var(--font-size-6xl);
    }

    .display-lg {
        font-size: var(--font-size-5xl);
    }

    .display-md {
        font-size: var(--font-size-4xl);
    }

    .section-title {
        font-size: var(--font-size-4xl);
    }

    .hero-title {
        font-size: var(--font-size-6xl);
    }

    .hero-subtitle p {
        font-size: var(--font-size-xl);
    }

}


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

@media (max-width: 768px) {



    h1 {
        font-size: var(--font-size-4xl);
    }

    h2 {
        font-size: var(--font-size-3xl);
    }

    h3 {
        font-size: var(--font-size-2xl);
    }

    h4 {
        font-size: var(--font-size-xl);
    }

    .display-xl {
        font-size: var(--font-size-5xl);
    }

    .display-lg {
        font-size: var(--font-size-4xl);
    }

    .display-md {
        font-size: var(--font-size-3xl);
    }

    .section-title {
        font-size: var(--font-size-3xl);
    }

    .section-description {
        font-size: var(--font-size-base);
    }

    .hero-title {
        font-size: var(--font-size-5xl);

        line-height: 0.95;
    }

    .hero-subtitle p {
        font-size: 1.85rem;
    }

    .hero-description {
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.65;
    }


    .hero-eyebrow-text {
        font-size: 0.7rem;

        letter-spacing: 0.16em;
    }

    .hero-location {
        font-size: var(--font-size-xs);
    }

    .hero-highlight {
        font-size: var(--font-size-xs);
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .hero-title {
        font-size: var(--font-size-4xl);

        line-height: 0.95;
    }

    .hero-subtitle p {
        font-size: var(--font-size-md);
    }

    .hero-description {
        font-size: var(--font-size-sm);

        line-height: 1.6;
    }

    .section-title {
        font-size: var(--font-size-3xl);
    }

    .quote {
        font-size: var(--font-size-2xl);
    }

}