/* Tsukumo 全体の色、文字、初期化を定義する。 */
:root {
    color-scheme: light;
    --color-primary: #db3a0a;
    --color-primary-strong: #9f2908;
    --color-primary-soft: #fff0e8;
    --color-accent: #ffb000;
    --color-ink: #202631;
    --color-muted: #657184;
    --color-surface: #ffffff;
    --color-surface-alt: #f5f6f8;
    --color-border: #d7dde6;
    --color-success: #137547;
    --color-success-soft: #e7f7ee;
    --color-danger: #b42318;
    --color-danger-soft: #fff0ee;
    --shadow-sm: 0 3px 12px rgba(32, 38, 49, 0.08);
    --shadow-md: 0 18px 42px rgba(32, 38, 49, 0.16);
    --radius-sm: 10px;
    --radius-md: 18px;
    --content-width: 1120px;
    font-family: "Noto Sans JP", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--color-surface-alt);
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--color-ink);
    background:
        radial-gradient(circle at 8% -8%, rgba(219, 58, 10, 0.09), transparent 30rem),
        radial-gradient(circle at 96% 12%, rgba(255, 176, 0, 0.07), transparent 24rem),
        var(--color-surface-alt);
    line-height: 1.7;
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit;
}

button,
a,
label {
    -webkit-tap-highlight-color: transparent;
}

a { color: var(--color-primary-strong); }
img { max-width: 100%; height: auto; }

:focus-visible {
    outline: 3px solid #126bc5;
    outline-offset: 3px;
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}