/* -----------------------------------------------------------------------------
 * SAKAZUKI Design Tokens
 * design_handoff_sakazuki_site/README.md の「Design Tokens」章に対応。
 * すべての色・タイポ・形状値はここに集約する。
 * --------------------------------------------------------------------------- */

:root {
    /* Color — text / brand */
    --sk-color-text:            #16202f; /* 本文・見出し既定 */
    --sk-color-heading-blue:    #2a62a5; /* 見出し・ラベル青 */
    --sk-color-accent:          #1d9fc4; /* アクセント水色（旧ホバー） */
    --sk-color-muted:           #8a919c; /* 日付・タグ・キャプション */
    --sk-color-required:        #b4552f; /* 必須マーク */

    /* Color — surface */
    --sk-color-bg:              #ffffff;
    --sk-color-bg-mint:         #eef6f8; /* TOP COMPANY / footer wrap（TOP） */
    --sk-color-bg-cool:         #eef1f4; /* 下層 FAQ / footer wrap */
    --sk-color-dark-card:       #16202f; /* フッターの黒カード */
    --sk-color-contact-card:    #f7fbfd; /* フッター内CONTACTカード */
    --sk-color-company-rule:    #b9c6d2;

    /* Color — rule */
    --sk-rule-25:               rgba(22, 32, 47, 0.25);
    --sk-rule-35:               rgba(22, 32, 47, 0.35);
    --sk-rule-45:               rgba(22, 32, 47, 0.45);

    /* Gradient — hover text */
    --sk-grad-hover-light:      linear-gradient(90deg, #17a6c9, #3f7ac2, #9a7fd6);
    --sk-grad-hover-dark:       linear-gradient(90deg, #7fd6ec, #9ab8f0, #cdbcf7);

    /* Typography */
    --sk-font-body:             'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Helvetica Neue', Arial, sans-serif;
    --sk-fw-regular:            400;
    --sk-fw-medium:             500;
    --sk-fw-bold:               700;
    --sk-fw-black:              900;
    --sk-line-body:             2.1;
    --sk-tracking-body:         0.06em;
    --sk-tracking-tight:        0.04em;
    --sk-tracking-wide:         0.08em;

    /* Radius */
    --sk-radius-card:           12px;
    --sk-radius-card-lg:        28px;
    --sk-radius-header:         28px;
    --sk-radius-pill:           9999px;

    /* Shadow */
    --sk-shadow-card:           0 6px 24px rgba(10, 40, 80, 0.10);
    --sk-shadow-card-hover:     0 18px 38px rgba(16, 70, 100, 0.20);

    /* Glass */
    --sk-glass-bg-light:        linear-gradient(180deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.35));
    --sk-glass-blur:            blur(16px) saturate(1.4);
    --sk-glass-blur-heavy:      blur(24px) saturate(1.4);

    /* Motion */
    --sk-ease:                  cubic-bezier(0.22, 0.61, 0.36, 1);
    --sk-transition-link:       transform 0.35s var(--sk-ease), box-shadow 0.35s ease, color 0.2s ease, border-color 0.2s ease;

    /* Layout */
    --sk-container-max:         1120px;
    --sk-header-inset:          16px;
    --sk-header-top:            12px;

    /* Z-index scale — overlay < header にすることでハンバーガー(ヘッダー内)から開閉可能に */
    --sk-z-bg:                  0;
    --sk-z-content:             1;
    --sk-z-menu-overlay:        40;
    --sk-z-header:              50;
}

/* Reduce motion — reveal/parallax は main.js 側でも判定 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --sk-transition-link: color 0.2s ease;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}