/* Shoelace 主题微调。
 *
 * 不重画调色板:Shoelace 自带的 light/dark 两套中性色阶已经足够现代,这里
 * 只改两样 —— 主色(跟站点强调色一致)和字体。尺寸和胶囊圆角由用到的
 * 组件自己带(pill 属性、页面上的 --sl-input-height-medium),不往全局塞。
 * 自己维护的颜色越少,深色模式越不容易漂。
 *
 * 这些自定义属性会穿透 shadow root,从 `:root` 一路继承进组件内部。 */

:root {
    /* 字体跟随站点正文(template.css 的 body 那一串)。 */
    --sl-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC",
        "Microsoft YaHei", sans-serif;
}

/* 主色 = 站点浅色主题的强调色(--accent = #11566c)。600 是实心按钮的底,
 * 700 是 hover;白字压在这两个值上对比度都够。 */
:root {
    --sl-color-primary-50: #eaf4f6;
    --sl-color-primary-100: #d3e8ec;
    --sl-color-primary-200: #a8d0d9;
    --sl-color-primary-300: #7bb6c4;
    --sl-color-primary-400: #4f9aad;
    --sl-color-primary-500: #2a7b92;
    --sl-color-primary-600: #11566c;
    --sl-color-primary-700: #0e495c;
    --sl-color-primary-800: #0b3c4c;
    --sl-color-primary-900: #082e3b;
}

/* 深色下色阶方向反过来:**数字越大越亮**。Shoelace 的深色主题把实心按钮的
 * 文字设成 --sl-color-neutral-0(近黑),主色因此必须偏亮才读得清 —— 这和
 * 浅色主题(白字压深底)正好相反,照搬浅色那套深青会得到黑字压黑底。
 * 600 取站点深色强调色 #4fd1e0,700 再亮一档做 hover。 */
:root[data-theme="dark"] {
    --sl-color-primary-50: hsl(187 60% 12%);
    --sl-color-primary-100: hsl(187 65% 18%);
    --sl-color-primary-200: hsl(187 65% 25%);
    --sl-color-primary-300: hsl(187 68% 34%);
    --sl-color-primary-400: hsl(187 70% 45%);
    --sl-color-primary-500: hsl(187 72% 53%);
    --sl-color-primary-600: hsl(187 70% 59%);
    --sl-color-primary-700: hsl(187 78% 68%);
    --sl-color-primary-800: hsl(187 85% 78%);
    --sl-color-primary-900: hsl(187 90% 85%);
}

/* Material Icons 是字体渲染的,`<i class="material-icons" slot="prefix">` 由
 * 组件收进 prefix slot。这里只补图标与文字的间距和字号,其余交给组件。 */
sl-button [slot="prefix"] {
    font-size: 1.125rem;
    margin-right: 0.375rem;
}