/* ============================================================
   KARTUL — house type styles (editor design system)

   Editors pick from named swatches and sizes in the Panel — never
   raw hex or font-size boxes. New names (c-plain, t-display, …) plus
   legacy aliases (c-ink-paper, t-poster, …) so existing content works.
   ============================================================ */

:root {
    /* ========== TUNE HERE — colours (fill + stroke) ================= */

    --c-plain-fill:   #000000;
    --c-plain-stroke: #000000;
    --c-plain-w:      0px;

    --c-light-fill:   #ffffff;
    --c-light-stroke: #ffffff;
    --c-light-w:      1.5px;

    --c-events-fill:   #ffe100;
    --c-events-stroke: #e5001c;
    --c-events-w:      1.5px;

    --c-brand-fill:   #339966;
    --c-brand-stroke: #111111;
    --c-brand-w:      1.5px;

    --c-lime-fill:   #00ff00;
    --c-lime-stroke: #339966;
    --c-lime-w:      1.5px;

    --c-red-fill:   #e5001c;
    --c-red-stroke: #ffffff;
    --c-red-w:      1.5px;

    /* legacy token aliases */
    --c-ink-paper-fill:   var(--c-plain-fill);
    --c-ink-paper-stroke: var(--c-plain-stroke);
    --c-ink-paper-w:      var(--c-plain-w);
    --c-paper-ink-fill:   var(--c-light-fill);
    --c-paper-ink-stroke: var(--c-light-stroke);
    --c-paper-ink-w:      var(--c-light-w);
    --c-yellow-red-fill:   var(--c-events-fill);
    --c-yellow-red-stroke: var(--c-events-stroke);
    --c-yellow-red-w:      var(--c-events-w);
    --c-green-black-fill:   var(--c-brand-fill);
    --c-green-black-stroke: var(--c-brand-stroke);
    --c-green-black-w:      var(--c-brand-w);
    --c-lime-forest-fill:   var(--c-lime-fill);
    --c-lime-forest-stroke: var(--c-lime-stroke);
    --c-lime-forest-w:      var(--c-lime-w);
    --c-red-paper-fill:   var(--c-red-fill);
    --c-red-paper-stroke: var(--c-red-stroke);
    --c-red-paper-w:      var(--c-red-w);

    /* ========== TUNE HERE — type sizes ============================== */

    --t-display-size:   clamp(24px, 5.5vw, 42px);
    --t-display-weight: 400;
    --t-display-lh:     1.08;

    --t-lead-size:   clamp(16px, 2.2vw, 21px);
    --t-lead-weight: 700;
    --t-lead-lh:     1.15;

    --t-regular-size:   var(--measure, 14.5px);
    --t-regular-weight: 400;
    --t-regular-lh:     1.2;

    /* legacy token aliases */
    --t-poster-size:   var(--t-display-size);
    --t-poster-weight: var(--t-display-weight);
    --t-poster-lh:     var(--t-display-lh);
    --t-statement-size:   var(--t-lead-size);
    --t-statement-weight: var(--t-lead-weight);
    --t-statement-lh:     var(--t-lead-lh);
    --t-body-size:   var(--t-regular-size);
    --t-body-weight: var(--t-regular-weight);
    --t-body-lh:     var(--t-regular-lh);
}

/* ---------- colour pairs ---------- */
:is(.c-plain, .c-ink-paper) {
    color: var(--c-plain-fill);
    -webkit-text-stroke: var(--c-plain-w) var(--c-plain-stroke);
    paint-order: stroke fill;
}
:is(.c-light, .c-paper-ink) {
    color: var(--c-light-fill);
    -webkit-text-stroke: var(--c-light-w) var(--c-light-stroke);
    paint-order: stroke fill;
}
:is(.c-events, .c-yellow-red) {
    color: var(--c-events-fill);
    -webkit-text-stroke: var(--c-events-w) var(--c-events-stroke);
    paint-order: stroke fill;
}
:is(.c-brand, .c-green-black) {
    color: var(--c-brand-fill);
    -webkit-text-stroke: var(--c-brand-w) var(--c-brand-stroke);
    paint-order: stroke fill;
}
:is(.c-lime, .c-lime-forest) {
    color: var(--c-lime-fill);
    -webkit-text-stroke: var(--c-lime-w) var(--c-lime-stroke);
    paint-order: stroke fill;
}
:is(.c-red, .c-red-paper) {
    color: var(--c-red-fill);
    -webkit-text-stroke: var(--c-red-w) var(--c-red-stroke);
    paint-order: stroke fill;
}

/* ---------- type treatments ---------- */
:is(.t-display, .t-poster) {
    font-size: var(--t-display-size);
    font-weight: var(--t-display-weight);
    line-height: var(--t-display-lh);
    margin: 0;
}
:is(.t-lead, .t-statement) {
    font-size: var(--t-lead-size);
    font-weight: var(--t-lead-weight);
    line-height: var(--t-lead-lh);
    margin: 0;
}
:is(.t-regular, .t-body) {
    font-size: var(--t-regular-size);
    font-weight: var(--t-regular-weight);
    line-height: var(--t-regular-lh);
    margin: 0;
}

.block-styled-text {
    max-width: 100%;
}
.block-styled-text :is(.t-display, .t-lead, .t-regular, .t-poster, .t-statement, .t-body) {
    word-break: break-word;
}

.block-audio-title:is(.t-display, .t-lead, .t-regular, .t-poster, .t-statement, .t-body) {
    word-break: break-word;
}