/* Shared Plucky product typography. Product shells opt in to this declaration. */
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/manrope-vf.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* Plucky brand display faces, for wordmarks and logotypes only. Both are
   unicase: every lowercase codepoint maps to the uppercase glyph, so markup
   keeps its natural capitalisation and the face renders it as caps. Neither
   carries digits or punctuation, so unicode-range stops the browser reaching
   for them outside A-Z and lets the fallback stack handle everything else. */
@font-face {
    font-family: "Plucky Block";
    src: url("../fonts/plucky-block/PluckyBlock-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020, U+0041-005A, U+0061-007A, U+00A0;
}

@font-face {
    font-family: "Plucky Script";
    src: url("../fonts/plucky-script/PluckyScript-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020, U+0041-005A, U+0061-007A, U+00A0;
}

:root {
    --plucky-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --plucky-font-block: "Plucky Block", var(--plucky-font-family);
    --plucky-font-script: "Plucky Script", var(--plucky-font-family);
}

/* Plucky Inbox house wordmark.

   Two brand faces on a shared baseline, echoing the Plucky Wire lockup:
   small block caps, then the brush face set much larger, separated by a
   gap proportional to the block cap height. Baseline alignment is what
   produces the lockup, so the ratio lives entirely in font-size and the
   component scales from a single value on .pw-wordmark.

   Plucky Script has no lowercase, so "Inbox" sets as INBOX. Colour is
   inherited, letting one component read brand red on a light nav and
   white against the dark footer.

   It sits in this shared sheet rather than in one product's stylesheet
   because it is built entirely from the two brand faces declared above,
   and both the public site and the authenticated app render it. Each
   shell keeps its own placement rules (colour, size in context). */
.pw-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.29em;
    line-height: 1;
    white-space: nowrap;
    font-size: 1.25rem;
    color: currentColor;
}

.pw-wordmark-block {
    font-family: var(--plucky-font-block);
    font-weight: 400;
    font-size: 1em;
}

.pw-wordmark-script {
    font-family: var(--plucky-font-script);
    font-weight: 400;
    font-size: 2.3em;
}