@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/open-sans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/open-sans/OpenSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@layer typography {

:root {
    --plot-title-size: 2.2em;

    /* ── Font-Family ── */
    --font-family-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

    /* ── Font-Size-Skala ── */
    --fs-2xs:    0.625rem;
    --fs-xs:     0.6875rem;
    --fs-sm:     0.75rem;
    --fs-base:   0.8125rem;
    --fs-md:     0.875rem;
    --fs-lg:     1rem;
    --fs-xl:     1.25rem;
    --fs-2xl:    1.5rem;
    --fs-3xl:    1.75rem;
    --fs-4xl:    2rem;
    --fs-5xl:    2.25rem;
    --fs-hero:   3rem;
    --fs-display: 3.75rem;

    /* ── Font-Weights ── */
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ── Line-Heights ── */
    --lh-tight:   1.4;
    --lh-normal:  1.6;
    --lh-relaxed: 1.7;
    --lh-loose:   1.8;

    /* ── Letter-Spacing ── */
    --ls-wide: 0.02em;
}

/* Fluid root font-size: 12px (mobil) → 16px (≥800px) */
html { font-size: clamp(12px, 0.8vw + 9.5px, 16px); }

/* ── Font Size Scale ── */
.ft-size-huge   { font-size: 2.25rem; }
.ft-size-large  { font-size: 1.5rem; }
.ft-size-normal { font-size: 1.125rem; }
.ft-size-small  { font-size: 0.9375rem; }
.ft-size-tiny   { font-size: 0.8125rem; }

/* ── Font Colors ── */
.ft-col-base      { color: var(--font-base); }
.ft-col-grey      { color: var(--font-grey); }
.ft-col-highlight { color: var(--font-highlight); }
.ft-col-accent    { color: var(--font-accent); }
.ft-col-light     { color: var(--font-light); }

/* ── Font Weights ── */
.ft-weight-normal { font-weight: var(--fw-normal); }
.ft-weight-accent { font-weight: var(--fw-semibold); }
.ft-weight-bold   { font-weight: var(--fw-bold); }

/* ── Text Alignment ── */
.txt-left   { text-align: left; }
.txt-center { text-align: center; }

/* ── Form element defaults ── */
label, textarea { font-size: var(--fs-base); font-family: inherit; }
input, button   { font-size: var(--fs-sm);   font-family: inherit; }
select          { font-size: var(--fs-sm);   font-family: inherit; }

/* ── Widget-interne Schriftgrößen ── */
.widget {
    font-size: var(--fs-base);
    --plot-font-size: 13px;
}
.widget label, .widget textarea { font-size: var(--fs-base); }
.widget input, .widget select { font-size: var(--fs-sm); }
.widget__header label,
.widget .barometer > div > label,
label.settings-section-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }

/* ── Container-responsive Widget-Schrift ── */
@container (max-width: 400px) {
    .widget { font-size: var(--fs-xs); --plot-font-size: 11px; }
    .widget__header label { font-size: var(--fs-sm); }
    .widget input, .widget button, .widget select { font-size: var(--fs-2xs); }
}
@container (max-width: 300px) {
    .widget { font-size: var(--fs-2xs); --plot-font-size: 10px; }
    .widget__header label { font-size: var(--fs-xs); }
}
@container (min-width: 800px) {
    .widget { font-size: var(--fs-md); --plot-font-size: 14px; }
    .widget__header label { font-size: 0.9375rem; }
}

/* ── Prognose-Filter Label ── */
.prognose-filter-label {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--font-base);
    margin: 0;
    white-space: nowrap;
}

} /* @layer typography */