/* qwri brand — wordmark, q-lockup, color tokens.
   Spec: design/qwri-logo-final.html (24 Apr 2026, ticket 01a). */

:root {
    --qwri-accent: #0F766E;
    --qwri-accent-ink: #115E59;
    --qwri-accent-soft: #5EEAD4;
    --qwri-on-accent: #FFFFFF;
    --qwri-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
}

/* Wordmark — the word qwri set in Fraunces variable, optical-size tuned to render size.
   Default render is hero scale (96px); callers override font-size via a wrapping class
   to drive the size ladder (96 / 48 / 24 / 15 / 12 px). */
.qwri-wordmark {
    font-family: var(--qwri-display);
    font-variation-settings: "opsz" 144, "wght" 500;
    font-weight: 500;
    color: var(--qwri-accent);
    letter-spacing: -0.035em;
    line-height: 1;
    display: inline-block;
}

.qwri-wordmark::selection { background: var(--qwri-accent); color: var(--qwri-on-accent); }

/* Size modifiers — match the design's optical-size + tracking ladder.
   opsz axis drops as the mark shrinks; weight ticks up; tracking loosens. */
.qwri-wordmark--96 { font-size: 96px; font-variation-settings: "opsz" 144, "wght" 500; letter-spacing: -0.035em; }
.qwri-wordmark--72 { font-size: 72px; font-variation-settings: "opsz" 96, "wght" 500; letter-spacing: -0.035em; }
.qwri-wordmark--48 { font-size: 48px; font-variation-settings: "opsz" 48, "wght" 500; letter-spacing: -0.025em; }
.qwri-wordmark--32 { font-size: 32px; font-variation-settings: "opsz" 32, "wght" 500; letter-spacing: -0.025em; }
.qwri-wordmark--24 { font-size: 24px; font-variation-settings: "opsz" 24, "wght" 500; letter-spacing: -0.015em; }
.qwri-wordmark--16 { font-size: 16px; font-variation-settings: "opsz" 14, "wght" 600; letter-spacing: -0.005em; }
.qwri-wordmark--12 { font-size: 12px; font-variation-settings: "opsz" 10, "wght" 700; letter-spacing: 0; }

/* Dark-surface variant — accent-soft per spec (#5EEAD4). */
.qwri-wordmark--on-dark { color: var(--qwri-accent-soft); }

/* Q-lockup — used at favicon / avatar / sub-12px scale where the word can't survive.
   White q on a teal rounded square; radius is 22% of side per spec.
   Variants 16 / 32 / 64 / 128 / 512 mirror the favicon stack in §03. */
.qwri-q-lockup {
    background: var(--qwri-accent);
    color: var(--qwri-on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--qwri-display);
    font-variation-settings: "opsz" 96, "wght" 500;
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1;
    flex-shrink: 0;
}

.qwri-q-lockup--512 { width: 160px; height: 160px; border-radius: 32px; font-size: 128px; }
.qwri-q-lockup--128 { width: 96px;  height: 96px;  border-radius: 20px; font-size: 76px;  font-variation-settings: "opsz" 72, "wght" 500; }
.qwri-q-lockup--64  { width: 56px;  height: 56px;  border-radius: 12px; font-size: 44px;  font-variation-settings: "opsz" 48, "wght" 500; }
.qwri-q-lockup--32  { width: 32px;  height: 32px;  border-radius: 7px;  font-size: 24px;  font-variation-settings: "opsz" 24, "wght" 500; }
.qwri-q-lockup--16  { width: 16px;  height: 16px;  border-radius: 3.5px; font-size: 12px; font-variation-settings: "opsz" 10, "wght" 700; letter-spacing: -0.03em; }