:root {
    color-scheme: light;
    --sj-font-ui: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sj-font-serif: "Noto Serif SC", "Source Han Serif SC", "Source Han Serif CN", "Songti SC", "STSong", "SimSun", Georgia, "Times New Roman", serif;
    --sj-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --sj-max: 1180px;
    --sj-gutter: clamp(1rem, 4vw, 2rem);
    --sj-header-h: 72px;
    --sj-radius-xs: 8px;
    --sj-radius-sm: 12px;
    --sj-radius-md: 18px;
    --sj-radius-lg: 26px;
    --sj-radius-pill: 999px;
    --sj-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --sj-dur: 0.32s;
    --sj-bg: #f7f4ee;
    --sj-bg-soft: #efe9df;
    --sj-surface: #fffdf8;
    --sj-surface-2: #f3eee5;
    --sj-text: #221f1a;
    --sj-text-soft: #4f4a42;
    --sj-muted: #8b8377;
    --sj-line: #e4dccd;
    --sj-line-strong: #d2c8b6;
    --sj-spring: #5f9475;
    --sj-summer: #4f8cae;
    --sj-autumn: #be7443;
    --sj-winter: #7b8caa;
    --sj-season-line: linear-gradient(90deg, var(--sj-spring), var(--sj-summer), var(--sj-autumn), var(--sj-winter));
    --sj-shadow-sm: 0 1px 2px rgba(34, 31, 26, 0.04), 0 10px 30px -22px rgba(34, 31, 26, 0.35);
    --sj-shadow-md: 0 2px 4px rgba(34, 31, 26, 0.05), 0 22px 45px -28px rgba(34, 31, 26, 0.42);
    --sj-shadow-lg: 0 4px 8px rgba(34, 31, 26, 0.05), 0 34px 60px -34px rgba(34, 31, 26, 0.5);
    --sj-accent: #3f7757;
    --sj-accent-strong: #2f5f44;
    --sj-on-accent: #fffdf8;
    --sj-accent-soft: #e5efe7;
    --sj-accent-wash: rgba(63, 119, 87, 0.1);
}

[data-season="spring"] {
    --sj-accent: #3f7757;
    --sj-accent-strong: #2f5f44;
    --sj-on-accent: #fffdf8;
}

[data-season="summer"] {
    --sj-accent: #2e6c94;
    --sj-accent-strong: #245a7c;
    --sj-on-accent: #fffdf8;
}

[data-season="autumn"] {
    --sj-accent: #a4512a;
    --sj-accent-strong: #86401f;
    --sj-on-accent: #fffdf8;
}

[data-season="winter"] {
    --sj-accent: #4c5f82;
    --sj-accent-strong: #3b4c6b;
    --sj-on-accent: #fffdf8;
}

@supports (color: color-mix(in srgb, #000, #fff)) {
    :root,
    [data-season] {
        --sj-accent-soft: color-mix(in srgb, var(--sj-accent) 13%, var(--sj-surface));
        --sj-accent-wash: color-mix(in srgb, var(--sj-accent) 15%, transparent);
    }
}

[data-theme="dark"] {
    color-scheme: dark;
    --sj-bg: #121316;
    --sj-bg-soft: #16181c;
    --sj-surface: #191b20;
    --sj-surface-2: #202329;
    --sj-text: #ece6db;
    --sj-text-soft: #c9c2b6;
    --sj-muted: #918a7f;
    --sj-line: #2a2d34;
    --sj-line-strong: #3a3e47;
    --sj-spring: #7cab8f;
    --sj-summer: #7aa9c5;
    --sj-autumn: #cd8f66;
    --sj-winter: #93a3c0;
    --sj-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px -22px rgba(0, 0, 0, 0.9);
    --sj-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.55), 0 24px 48px -28px rgba(0, 0, 0, 0.95);
    --sj-shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.6), 0 36px 64px -34px rgba(0, 0, 0, 1);
    --sj-accent: #7fbb96;
    --sj-accent-strong: #a6d4b7;
    --sj-on-accent: #10150f;
}

[data-theme="dark"][data-season="spring"] {
    --sj-accent: #7fbb96;
    --sj-accent-strong: #a6d4b7;
    --sj-on-accent: #10150f;
}

[data-theme="dark"][data-season="summer"] {
    --sj-accent: #7cb5d8;
    --sj-accent-strong: #a3cfe9;
    --sj-on-accent: #0c151b;
}

[data-theme="dark"][data-season="autumn"] {
    --sj-accent: #dd9a6d;
    --sj-accent-strong: #eeb995;
    --sj-on-accent: #1a100a;
}

[data-theme="dark"][data-season="winter"] {
    --sj-accent: #9fb0cf;
    --sj-accent-strong: #c0cde3;
    --sj-on-accent: #0c1220;
}