/*
 * Bondisnar typography system
 * Shared tokens for pages, kiosk surfaces and Deskline shadow styles.
 */

:root,
:host {
    --bon-font: 'Lato', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bon-h1: clamp(2.2rem, 5vw, 2.6rem);
    --bon-h1-weight: 900;
    --bon-h1-line: 0.92;
    --bon-section-label-size: 0.78rem;
    --bon-section-label-weight: 900;
    --bon-section-label-tracking: 0.14em;
    --bon-card-title-size: 0.8rem;
    --bon-card-title-weight: 800;
    --bon-card-title-tracking: 0.08em;
    --bon-card-title-line: 1.3;
    --bon-body-size: clamp(1rem, 1.6vw, 1.28rem);
    --bon-body-weight: 500;
    --bon-body-line: 1.55;
    --bon-excerpt-weight: 700;
    --bon-h2-content-size: 1.15rem;
    --bon-h2-content-weight: 900;
    --bon-h2-content-line: 1.2;
    --bon-meta-label-size: 0.62rem;
    --bon-meta-label-weight: 900;
    --bon-meta-label-tracking: 0.12em;
    --bon-meta-group-label-tracking: 0.18em;
    --bon-meta-value-size: 0.92rem;
    --bon-meta-value-weight: 800;
    --bon-meta-value-line: 1.24;
    --bon-chip-size: 0.72rem;
    --bon-chip-weight: 800;
    --bon-chip-line: 1.15;
}

body {
    font-family: var(--bon-font);
}

.bon-h1 {
    font-family: var(--bon-font);
    font-size: var(--bon-h1);
    line-height: var(--bon-h1-line);
    font-weight: var(--bon-h1-weight);
    letter-spacing: 0;
}

.bon-section-label {
    font-family: var(--bon-font);
    font-size: var(--bon-section-label-size);
    line-height: 1;
    font-weight: var(--bon-section-label-weight);
    letter-spacing: var(--bon-section-label-tracking);
    text-transform: uppercase;
}

.bon-card-title {
    font-family: var(--bon-font);
    font-size: var(--bon-card-title-size);
    line-height: var(--bon-card-title-line);
    font-weight: var(--bon-card-title-weight);
    letter-spacing: var(--bon-card-title-tracking);
    text-transform: uppercase;
}

.bon-body {
    font-family: var(--bon-font);
    font-size: var(--bon-body-size);
    line-height: var(--bon-body-line);
    font-weight: var(--bon-body-weight);
}

.bon-excerpt {
    font-family: var(--bon-font);
    font-size: var(--bon-body-size);
    line-height: var(--bon-body-line);
    font-weight: var(--bon-excerpt-weight);
}

.bon-meta-label {
    font-family: var(--bon-font);
    font-size: var(--bon-meta-label-size);
    line-height: 1;
    font-weight: var(--bon-meta-label-weight);
    letter-spacing: var(--bon-meta-label-tracking);
    text-transform: uppercase;
}

.bon-meta-value {
    font-family: var(--bon-font);
    font-size: var(--bon-meta-value-size);
    line-height: var(--bon-meta-value-line);
    font-weight: var(--bon-meta-value-weight);
}

.bon-chip {
    font-family: var(--bon-font);
    font-size: var(--bon-chip-size);
    line-height: var(--bon-chip-line);
    font-weight: var(--bon-chip-weight);
}