/* =========================================================
   nkmry.com ブランド統一スタイル (brand.css)
   各アプリの stylesheet の「後」に読み込むこと。
   メインホームページ (css/style.css) のデザイントークンを
   全サービスの CSS 変数名にマッピングして配色・書体を統一する。
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    /* ---- nkmry.com デザイントークン（css/style.css と同一） ---- */
    --color-primary: #403999;
    --color-primary-light: #524cc2;
    --color-primary-dark: #2d2870;
    --color-accent: #ffc107;
    --color-accent-light: #ffcd38;
    --color-accent-dark: #d39e00;
    --color-success: #2ecc71;
    --color-error: #e74c3c;
    --color-warning: #f39c12;
    --color-info: #3498db;
    --color-bg: #f8f9fc;
    --color-bg-alt: #eef1f7;
    --color-surface: #ffffff;
    --color-surface-hover: #f0f2f8;
    --color-text: #1a1a2e;
    --color-text-light: #5a5f7a;
    --color-text-muted: #8e92a8;
    --color-border: #d8dce8;
    --color-border-light: #eceef5;
    --font-family-ja: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'メイリオ', sans-serif;
    --font-family-en: 'Outfit', 'Noto Sans JP', sans-serif;
    --brand-shadow-sm: 0 1px 3px rgba(15, 27, 61, 0.06);
    --brand-shadow-md: 0 4px 12px rgba(15, 27, 61, 0.08);
    --brand-shadow-lg: 0 8px 30px rgba(15, 27, 61, 0.12);

    /* ---- salary (給料計算) ---- */
    --accent: var(--color-primary);
    --accent-dark: var(--color-primary-dark);
    --accent-soft: #efeefa;
    --accent-line: #d9d6f0;

    /* ---- study (期末試験 進捗管理) ---- */
    --accent-tint: rgba(64, 57, 153, 0.10);
    --accent-tint-strong: rgba(64, 57, 153, 0.18);

    /* ---- url (URL短縮) ---- */
    --primary: var(--color-primary);
    --primary-hover: var(--color-primary-dark);
    --focus-ring: rgba(64, 57, 153, 0.35);
    --primary-blue: #dedcf3;
    --primary-pink: #efeefa;
    --gradient-bg: linear-gradient(135deg, #f5f4fb 0%, #eef1f7 100%);
    --btn-text: #1a1a2e;

    /* ---- clock ---- */
    --accent-color: var(--color-primary);
    --accent-gradient: linear-gradient(135deg, #524cc2, #2d2870);
    --accent-hover: linear-gradient(135deg, #403999, #2d2870);

    /* ---- count / grouping ---- */
    --primary-color: var(--color-primary);
    --gradient-primary: var(--color-primary);
    --gradient-hover: var(--color-primary-dark);
    --secondary-color: var(--color-accent-dark);
    --shadow-hover: 0 20px 40px rgba(64, 57, 153, 0.12);
}

/* ダークモードを持つアプリ（count 等）では明るめのブランド色に切り替える */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #8f89e0;
        --primary-hover: #aBA6ec;
        --accent-color: #8f89e0;
    }
}

/* ---- 書体の統一（全アプリ共通） ---- */
body {
    font-family: var(--font-family-ja) !important;
}

/* ---- stack (Stack Air) 用の補正: CSS変数を持たないため主要要素を直接上書き ---- */
body.stack-app,
.stack-app body {
    background: linear-gradient(135deg, #f8f9fc 0%, #eef1f7 60%, #efeefa 100%);
}
.stack-app .login-btn,
body .login-btn {
    background: var(--color-primary);
}
body .login-btn:hover {
    background: var(--color-primary-dark);
}