:root {
    --font-logo: "Press Start 2P", "DotGothic16", "MS PGothic", "Osaka-Mono", monospace;
    --font-display: "DotGothic16", "MS PGothic", "Osaka-Mono", monospace;
    --font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
    --font-ui: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
    --font-code: "SFMono-Regular", "Courier New", Consolas, monospace;

    --space-1: clamp(0.2rem, 0.35vw, 0.32rem);
    --space-2: clamp(0.35rem, 0.7vw, 0.5rem);
    --space-3: clamp(0.6rem, 1vw, 0.78rem);
    --space-4: clamp(0.85rem, 1.6vw, 1rem);
    --space-5: clamp(1rem, 2vw, 1.25rem);
    --space-6: clamp(1.25rem, 2.4vw, 1.5rem);
    --space-8: clamp(1.6rem, 3.6vw, 2rem);
    --space-10: clamp(2rem, 4.6vw, 2.5rem);
    --space-12: clamp(2.5rem, 6vw, 3rem);
    --space-16: clamp(3rem, 8vw, 4rem);

    --content-width: 1120px;
    --px-border: 2px;
    --card-shadow-offset: 3px;
    --focus-outline: 2px;
    --transition-base: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;

    --color-bg: #0f0e17;
    --color-bg-elevated: #1a1825;
    --color-surface: #1e1c2a;
    --color-surface-hover: #252336;
    --color-line: #3a3654;
    --color-line-strong: #4e6a7a;
    --color-text: #e2dcd0;
    --color-text-soft: #a8a1b6;
    --color-text-muted: #726b84;
    --color-accent: #c49a6c;
    --color-accent-deep: #a07850;
    --color-accent-glow: rgba(196, 154, 108, 0.16);
    --color-badge-bg: rgba(196, 154, 108, 0.14);
    --color-badge-text: #d9b48f;
    --color-shadow: rgba(0, 0, 0, 0.45);
    --color-header-meta: #8f869f;
    --color-grid: rgba(78, 106, 122, 0.22);
    --color-code-bg: rgba(196, 154, 108, 0.08);
    --color-theme-dark: #0f0e17;
    --color-theme-light: #e8e0d0;

    color-scheme: dark light;
}

[data-theme="dark"] {
    --color-bg: #0f0e17;
    --color-bg-elevated: #1a1825;
    --color-surface: #1e1c2a;
    --color-surface-hover: #252336;
    --color-line: #3a3654;
    --color-line-strong: #4e6a7a;
    --color-text: #e2dcd0;
    --color-text-soft: #a8a1b6;
    --color-text-muted: #726b84;
    --color-accent: #c49a6c;
    --color-accent-deep: #a07850;
    --color-accent-glow: rgba(196, 154, 108, 0.16);
    --color-badge-bg: rgba(196, 154, 108, 0.14);
    --color-badge-text: #d9b48f;
    --color-shadow: rgba(0, 0, 0, 0.45);
    --color-header-meta: #8f869f;
    --color-grid: rgba(78, 106, 122, 0.22);
    --color-code-bg: rgba(196, 154, 108, 0.08);
}

[data-theme="light"] {
    --color-bg: #e8e0d0;
    --color-bg-elevated: #f0ebe3;
    --color-surface: #e2dacb;
    --color-surface-hover: #d8cfc0;
    --color-line: #b8a894;
    --color-line-strong: #8b5e3c;
    --color-text: #1a1825;
    --color-text-soft: #5c5043;
    --color-text-muted: #8a7e72;
    --color-accent: #7f4f35;
    --color-accent-deep: #5c3826;
    --color-accent-glow: rgba(127, 79, 53, 0.12);
    --color-badge-bg: rgba(127, 79, 53, 0.12);
    --color-badge-text: #7f4f35;
    --color-shadow: rgba(80, 50, 20, 0.2);
    --color-header-meta: #6e604f;
    --color-grid: rgba(139, 94, 60, 0.14);
    --color-code-bg: rgba(127, 79, 53, 0.08);
}