/**
 * GoodSalla — Typography
 *
 * Heading styles (Cormorant Garamond) and body text styles (Inter).
 * All sizes and weights reference design tokens.
 *
 * @package GoodSalla
 */

/* ─── Headings ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.gs-h1, .gs-h2, .gs-h3, .gs-h4, .gs-h5, .gs-h6 {
    font-family: var(--gs-font-heading);
    font-weight: var(--gs-font-semibold);
    line-height: var(--gs-leading-tight);
    color: var(--gs-color-heading);
    margin: 0 0 var(--gs-space-4);
    letter-spacing: -0.01em;
}

h1, .gs-h1 { font-size: clamp(var(--gs-text-3xl), 5vw, var(--gs-text-5xl)); }
h2, .gs-h2 { font-size: clamp(var(--gs-text-2xl), 3.5vw, var(--gs-text-4xl)); }
h3, .gs-h3 { font-size: clamp(var(--gs-text-xl),  2.5vw, var(--gs-text-3xl)); }
h4, .gs-h4 { font-size: clamp(var(--gs-text-lg),  2vw,   var(--gs-text-2xl)); }
h5, .gs-h5 { font-size: var(--gs-text-lg); }
h6, .gs-h6 { font-size: var(--gs-text-base); font-weight: var(--gs-font-bold); font-family: var(--gs-font-body); }

/* ─── Body ─────────────────────────────────────────────────────────────────── */
body,
.gs-body {
    font-family: var(--gs-font-body);
    font-size: var(--gs-text-base);
    font-weight: var(--gs-font-normal);
    line-height: var(--gs-leading-normal);
    color: var(--gs-color-text);
}

p {
    margin: 0 0 var(--gs-space-4);
    max-width: 68ch; /* Optimal reading line length */
}

/* ─── Text Utilities ───────────────────────────────────────────────────────── */
.gs-text-xs    { font-size: var(--gs-text-xs); }
.gs-text-sm    { font-size: var(--gs-text-sm); }
.gs-text-base  { font-size: var(--gs-text-base); }
.gs-text-md    { font-size: var(--gs-text-md); }
.gs-text-lg    { font-size: var(--gs-text-lg); }
.gs-text-xl    { font-size: var(--gs-text-xl); }

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

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

.gs-font-normal   { font-weight: var(--gs-font-normal); }
.gs-font-medium   { font-weight: var(--gs-font-medium); }
.gs-font-semibold { font-weight: var(--gs-font-semibold); }
.gs-font-bold     { font-weight: var(--gs-font-bold); }

/* ─── Brand Name ───────────────────────────────────────────────────────────── */
/* The word "GoodSalla" displayed in headings always uses Cormorant Garamond */
.gs-brand-name {
    font-family: var(--gs-font-heading);
    font-weight: var(--gs-font-semibold);
    color: var(--gs-color-heading);
    letter-spacing: 0.02em;
}

/* ─── Product Name Typography ──────────────────────────────────────────────── */
.gs-product-name {
    font-family: var(--gs-font-body);
    font-size: var(--gs-text-sm);
    font-weight: var(--gs-font-medium);
    color: var(--gs-color-text);
    line-height: var(--gs-leading-snug);
}

.gs-product-brand {
    font-family: var(--gs-font-body);
    font-size: var(--gs-text-xs);
    font-weight: var(--gs-font-normal);
    color: var(--gs-color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ─── Price Typography ─────────────────────────────────────────────────────── */
.gs-price {
    font-family: var(--gs-font-body);
    font-size: var(--gs-text-base);
    font-weight: var(--gs-font-semibold);
    color: var(--gs-color-text);
}

.gs-price--sale {
    color: var(--gs-color-sale);
}

.gs-price--regular-crossed {
    font-weight: var(--gs-font-normal);
    color: var(--gs-color-text-muted);
    text-decoration: line-through;
}

/* ─── Section Heading Component ────────────────────────────────────────────── */
.gs-section-heading {
    margin-bottom: var(--gs-space-8);
}

.gs-section-heading--center {
    text-align: center;
}

.gs-section-heading--center p {
    margin-inline: auto;
}

.gs-section-heading__title {
    margin-bottom: var(--gs-space-2);
}

.gs-section-heading__subtitle {
    font-size: var(--gs-text-md);
    color: var(--gs-color-text-muted);
    max-width: 56ch;
}