/*
 * 公共使用的 CSS 文件。
 * 用于定义主题色等各种东西。
 */

/* == 主题色 == */
:root {
    color-scheme: light dark;

    --color-bg-n: light-dark(oklch(100% 0 0), oklch(30% 0.025 270));
    --color-bg-0: light-dark(oklch(95% 0 0), oklch(25% 0.02 270));
    --color-bg-1: light-dark(oklch(90% 0 0), oklch(20% 0.02 270));
    --color-bg-2: light-dark(oklch(85% 0 0), oklch(15% 0.02 270));

    --color-fg-0: light-dark(oklch(25% 0.02 270), oklch(90% 0.02 270));
    --color-fg-1: light-dark(oklch(35% 0.02 270), oklch(80% 0.02 270));

    --color-blue: light-dark(oklch(40% 0.2 270), oklch(80% 0.2 270));
    --color-green: light-dark(oklch(50% 0.1 150), oklch(80% 0.15 150));
    --color-link: var(--color-blue);

    --size-nav: 3rem;

    @media (width < 768px) {
        --size-nav: 4rem;
    }
}

/* == 页面设置 == */
html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;

    background-color: var(--color-bg-0);
    color: var(--color-fg-0);

    font-family: var(--font-sans);

    /* writing-mode: vertical-rl; */
}

/* == 配置默认字体 == */
code {
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

/* == 支持 Shiki 的高亮 == */
pre.shiki,
pre.shiki span {
    color: light-dark(var(--shiki-light), var(--shiki-dark));
    background-color: light-dark(var(--shiki-light-bg), var(--shiki-dark-bg));
}