/**
 * Pensala typography system
 *
 * The existing site uses a 62.5% root font size, so these tokens use pixels
 * until the root-size migration can be completed without changing layouts.
 */
:root {
    --pensala-font-family: "Montserrat", sans-serif;

    --pensala-text-xs: 12px;
    --pensala-text-sm: 14px;
    --pensala-text-base: 16px;
    --pensala-text-lg: 18px;
    --pensala-text-xl: 20px;
    --pensala-text-2xl: 24px;
    --pensala-text-3xl: 32px;
    --pensala-text-4xl: 40px;
    --pensala-text-5xl: 48px;

    --pensala-weight-regular: 400;
    --pensala-weight-medium: 500;
    --pensala-weight-semibold: 600;
    --pensala-weight-bold: 700;

    --pensala-text-primary: #263244;
    --pensala-text-secondary: #6b7385;
    --pensala-text-muted: #8b93a3;
}

body {
    color: var(--pensala-text-primary);
    font-family: var(--pensala-font-family);
    font-size: var(--pensala-text-base);
    font-weight: var(--pensala-weight-regular);
    line-height: 1.6;
}

/* Keep all user-facing copy in the selected brand typeface. Icon font
   elements are intentionally excluded from this selector. */
body :is(h1, h2, h3, h4, h5, h6, p, a, span, label, button, input, textarea, select, option, li, td, th, small, strong, b) {
    font-family: var(--pensala-font-family) !important;
}

/* Reading copy should create the lightest layer of the hierarchy. */
body p,
body td,
body input,
body textarea,
body select,
body .description,
body .text-muted {
    font-weight: var(--pensala-weight-regular) !important;
}

body p {
    line-height: 1.65;
}

/* Labels and navigation use medium rather than semibold or bold. */
body label,
body nav a,
body .nav-link,
body .dropdown-item,
body .badge,
body .category-badge,
body .metadata {
    font-weight: var(--pensala-weight-medium) !important;
}

/* Montserrat is naturally strong, so semibold is sufficient for headings. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
    font-weight: var(--pensala-weight-semibold) !important;
    letter-spacing: -0.015em;
}

body h1 {
    line-height: 1.15;
}

body h2,
body h3 {
    line-height: 1.25;
}

body h4,
body h5,
body h6 {
    line-height: 1.35;
}

body button,
body .btn,
body [type="button"],
body [type="submit"] {
    font-weight: var(--pensala-weight-semibold) !important;
}

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

body .price,
body .current-price,
body .new-price,
body .meta-pill {
    font-weight: var(--pensala-weight-bold) !important;
}

/* Standard reusable type roles for new and progressively migrated screens. */
.type-caption {
    font-size: var(--pensala-text-xs);
    font-weight: var(--pensala-weight-regular);
    line-height: 1.5;
}

.type-metadata {
    color: var(--pensala-text-secondary);
    font-size: var(--pensala-text-sm);
    font-weight: var(--pensala-weight-regular);
    line-height: 1.5;
}

.type-body {
    font-size: var(--pensala-text-base);
    font-weight: var(--pensala-weight-regular);
    line-height: 1.65;
}

.type-card-title {
    font-size: var(--pensala-text-lg);
    font-weight: var(--pensala-weight-semibold);
    line-height: 1.4;
}

.type-section-title {
    font-size: clamp(28px, 3vw, 36px);
    font-weight: var(--pensala-weight-semibold);
    line-height: 1.2;
}

.type-page-title {
    font-size: clamp(36px, 4vw, 48px);
    font-weight: var(--pensala-weight-semibold);
    line-height: 1.15;
}

@media (max-width: 575.98px) {
    body {
        font-size: 15px;
    }
}