/* 品牌字标：吉祥物 logo mark + Fredoka 600 混排双色文字，对齐品牌资产 README。
   字号由容器控制（font-size 继承），此处只定字体族 / 字重 / 双色 / 关大写 / logo。
   双色按主题三态切换，沿用 tokens.semantic.css 范式：显式 [data-theme] + 系统
   （无 data-theme 跟随 prefers-color-scheme）。 */
.wordmark
{
    display: inline-flex;
    align-items: center;
    /* 行内居中而非 baseline：作为 inline 元素嵌在 Title/文本行里时，按 baseline
       对齐会让高过文字的 logo 顶出行框上沿（顶栏上端溢出）；middle 居中消除。 */
    vertical-align: middle;
    gap: 0.4em;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

/* logo mark：高度随字号（em）缩放，方形吉祥物头像（透明 PNG，明暗背景皆可）。
   取 2em——只放大图像、不动文字（容器 font-size 不变），让头像在固定高度的顶栏里
   占得较满又不溢出：header 高 56px、font-size fs-22 时 =39.6px（约 71%）。头像
   四周本有透明留白，故需较大倍数视觉才填满。 */
.mark
{
    height: 1.8em;
    width: auto;
    flex-shrink: 0;
}

.text { white-space: nowrap; }

/* 浅色默认：Ink / Amber（README 指定）。 */
.name { color: #2C2118; }
.drop { color: #DB9410; }

/* 显式深色：白 / 亮金。 */
:global(:root[data-theme="dark"]) .name { color: #FFFFFF; }
:global(:root[data-theme="dark"]) .drop { color: #F8C637; }

/* 系统深色（未显式指定主题时跟随系统）。 */
@media (prefers-color-scheme: dark)
{
    :global(:root:not([data-theme])) .name { color: #FFFFFF; }
    :global(:root:not([data-theme])) .drop { color: #F8C637; }
}
