:root {
    --font: "Avenir Next", "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --mono: "SFMono-Regular", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
    --serif: "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
    --canvas: #f2f1e9;
    --surface: rgba(255, 255, 250, .42);
    --surface-solid: #fbfbf4;
    --surface-2: rgba(255, 255, 250, .64);
    --surface-3: rgba(18, 21, 16, .065);
    --ink: #121510;
    --text: #2d3028;
    --muted: #62675e;
    --faint: #858b80;
    --line: rgba(18, 21, 16, .14);
    --line-strong: rgba(18, 21, 16, .26);
    --accent: #315fc4;
    --accent-hover: #284fa6;
    --accent-soft: rgba(49, 95, 196, .12);
    --success: #317153;
    --success-soft: rgba(49, 113, 83, .13);
    --danger: #a94438;
    --danger-soft: rgba(169, 68, 56, .11);
    --radius: 20px;
    --radius-sm: 12px;
    --shadow: 0 18px 46px rgba(18, 21, 16, .075);
    --shadow-small: 0 10px 24px rgba(18, 21, 16, .055);
    --page-width: 1320px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    min-height: 100dvh;
    margin: 0;
    background:
        linear-gradient(rgba(18, 21, 16, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18, 21, 16, .035) 1px, transparent 1px),
        var(--canvas);
    background-size: 64px 64px;
    color: var(--text);
    font-family: var(--font);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .08;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

button,
a,
input,
textarea {
    outline: none;
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent);
    outline-offset: 3px;
}