/**
 * Alfred Travel — premium concierge typography
 * Load after tokens.css (and page CSS). Provides fonts + global scale utilities.
 */

@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

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

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

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: var(--leading-body);
}

body,
.font-body {
    font-family: var(--font-body);
}

.font-heading {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: var(--tracking-heading);
}

/* ---- Scale utilities ---- */

.text-hero {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.text-page-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 3.8vw, 3.5rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.text-section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.text-card-title {
    font-family: var(--font-body);
    font-size: clamp(1.125rem, 1.5vw, 1.375rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.text-body {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.1vw, 1.125rem);
    font-weight: 400;
    line-height: 1.65;
}

.text-caption {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--alfred-muted-text, #4b5563);
}

.text-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ---- TravelAI shell: heading serif, UI sans ---- */

body.tai-site {
    font-family: var(--font-body);
}

body.tai-site .tai-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

body.tai-site .tai-agn-heading,
body.tai-site .tai-intent-header h2,
body.tai-site .tai-dark-header h2,
body.tai-site .tai-download-section h2,
body.tai-site .tai-join-copy h2,
body.tai-site .tai-itinerary-hero-title,
body.tai-site .tai-itinerary-sample-agn .tai-agn-heading {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: -0.02em;
}

body.tai-site .tai-agn-heading {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    line-height: 1.12;
}

body.tai-site .tai-dark-header h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    line-height: 1.15;
}

body.tai-site .tai-hero-lead,
body.tai-site .tai-agn-desc,
body.tai-site .tai-dark-lead,
body.tai-site .tai-intent-lead,
body.tai-site .tai-intent-card p,
body.tai-site .tai-faq-card p,
body.tai-site .tai-nav-pill a,
body.tai-site .tai-desktop-nav .nav-links a,
body.tai-site .tai-btn-primary,
body.tai-site .tai-btn-secondary,
body.tai-site .tai-tutorial-link,
body.tai-site .tai-intent-kicker,
body.tai-site .tai-agn-badge {
    font-family: var(--font-body);
}

body.tai-site .tai-intent-card h3,
body.tai-site .tai-faq-card h3,
body.tai-site .tai-faq-group-heading,
body.tai-site .tai-dark-card h3,
body.tai-site .tai-tutorial-card h3,
body.tai-site .press-content h3,
body.tai-site .press-card h4 {
    font-family: var(--font-body);
    font-weight: 700;
}

body.tai-site .tai-agn-badge,
body.tai-site .tai-intent-kicker,
body.tai-site .press-eyebrow {
    letter-spacing: 0.12em;
}

/* ---- Legacy marketing + blog (styles.css) ---- */

.blog-article-title,
.blog-index-heading {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: -0.02em;
}

.blog-index-section-title {
    font-family: var(--font-heading);
    font-weight: 500;
}

.blog-article-body,
.blog-index-excerpt,
.blog-index-meta,
.blog-article-body h2,
.blog-article-body h3 {
    font-family: var(--font-body);
}

.blog-takeaways-title {
    font-family: var(--font-body);
    font-weight: 700;
}

.logo h1,
.download-cta,
.nav-links a,
.footer-column h3,
.cookies-text h3,
footer h3,
footer h4,
button,
input,
select,
textarea,
label,
.btn {
    font-family: var(--font-body);
}

h1:not(.tai-hero-title):not(.blog-article-title),
.hero-section h1,
.hero-content h1,
.planner-hero-title {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: -0.02em;
}

.about-page .tai-hero-title,
.terms-page .tai-hero-title,
.support-page .tai-hero-title,
.products-page .tai-hero-title,
.compare-index-page .tai-hero-title,
.itineraries-index-page .tai-hero-title {
    font-family: var(--font-heading);
}