/* Basic site styling */
@font-face {
    font-family: "Noto Serif JP";
    src: url("../assets/fonts/NotoSerifJP-Regular.woff2") format("woff2");
    font-display: swap;

}

@font-face {
    font-family: "Noto Sans JP";
    src: url("../assets/fonts/NotoSansJP-Regular.woff2") format("woff2");
    font-display: swap;
}

/* Design tokens */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Merriweather:wght@400;700&display=swap');

:root {
    --font-sans: 'Roboto', sans-serif;
    --font-serif: 'Merriweather', serif;

    /* Light base tokens */
    --color-primary: #0066cc;
    --color-secondary: #004499;
    --color-accent: #ff6600;

    --color-bg: #f9f9f9;
    --color-text: #222222;

    /* Page-level tokens (resolved) */
    --page-bg: var(--color-bg);
    --page-fg: var(--color-text);

    /* Header/Navigation tokens (light) */
    --header-bg: #001F3F;
    --header-fg: #ffffff;
    --nav-link: #ffffff;

    /* adjust as needed */

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.4s ease;

    /* Menu timings */
    --menu-item-dur: 280ms;
    --menu-step: 30ms;

    /* Menu visual tokens */
    --menu-shadow: 0 12px 24px rgba(0, 0, 0, .25);
    --menu-drop-shadow: drop-shadow(0 12px 24px rgba(0, 0, 0, .25));
    --menu-updating-opacity: 1;
}

/* Dark palette */
:root {
    --color-bg-dark: #1a1a1a;
    --color-text-dark: #e0e0e0;
    --color-primary-dark: #5599ff;
    --color-secondary-dark: #3366cc;
    --color-accent-dark: #ff9966;
}

/* 速すぎるとチラつくので少しだけ余裕のある easing に */
:root {
    --vt-ease: cubic-bezier(.2, .8, .2, 1);
}

:root {
    --header-min-h: 40px;
    /* ヘッダー最小高さ */
    --header-pad-block: .4rem;
    /* 上下パディング */
    --header-z: 1000;
    /* スタック順序 */
}

:root {
    --menu-radius: 10px;
    --menu-top-lift: 12px;
    --vk-size-radius: 10px;
}

:root {
    /* 端からの最低マージン（任意で調整） */
    --container-pad-x: 1rem;

    /* iOS等の安全域。未対応ブラウザは 0px 扱い */
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* Resolve tokens when dark mode is on (class is on html) */
html.dark-mode {
    --page-bg: var(--color-bg-dark);
    --page-fg: var(--color-text-dark);

    --header-bg: #111;
    /* 濃い黒 */
    --header-fg: #e0e0e0;
    --nav-link: var(--color-primary-dark);

    --menu-shadow: 0 18px 32px rgba(255, 255, 255, .18);
    --menu-drop-shadow: drop-shadow(0 18px 32px rgba(255, 255, 255, .18));
}

/* Base typography & page colors (apply to both html and body) */
html {
    font-family: var(--font-sans);
    line-height: 1.6;
}

html,
body {
    background-color: var(--page-bg);
    color: var(--page-fg);
}

/* Body layout */
body {
    margin: 0;
    padding: 0;
    /* ← ヘッダー背景が端まで届くように */
    background-image: none;
    /* 見え方のブレを避けるため一旦無効化 */
    background-attachment: fixed;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

header,
footer {
    background-color: var(--header-bg);
    color: var(--header-fg);
}

/* 中身は中央寄せ：最大幅1080px＋左右1rem余白（HTML変更不要） */
.site-header>*,
.site-footer>* {
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Links outside nav inherit page fg unless overridden */
a {
    color: inherit;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -999px;
    top: -999px;
}

.skip-link:focus {
    left: 0;
    top: 0;
    background: #fff;
    color: #001F3F;
    padding: .5rem;
}

/* 4) 本文の左右余白は main 側で管理（左端ベタ付きを解消） */
main {
    max-width: 1080px;
    margin-inline: auto;
    padding-inline: 1rem;
    /* ← 画面端と本文の間に余白 */
}

@keyframes first-visit-page-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

html[data-first-visit="true"] main {
    animation: first-visit-page-in 420ms var(--vt-ease) both;
}