/*
 * theme.css — アプリ全体の見た目の基準（デザイントークン）
 *
 * ルール
 * - 新しく書くスタイルは、色・角丸・余白・影・文字サイズをここの --ds-* 変数から取る。
 *   テンプレートに hex カラーや独自の角丸値を直接書かない。
 * - テーマ（light / dark / midnight）と視覚補助モードは、このファイルで変数の値を
 *   差し替えるだけで切り替わるようにする。ページ側で dark-mode 用の上書きを書かない。
 * - 色は「お金の正負」に使う。操作系（ボタン・選択状態）は ink 系で表現する。
 * - アプリの色（accent・金色）は「主な操作」「今いる場所・今日」「主役の数字のまわり」だけに使う。
 *   一覧のボタンなど数の多いものには使わない（使うほど効かなくなる）。
 *
 * 下半分の --theme-* は既存ページが参照している旧変数。移行が終わるまで残す。
 */

/* ------------------------------------------------------------------
 * 1. デザイントークン
 * ---------------------------------------------------------------- */
:root {
    /* 文字 */
    --ds-font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --ds-text-hero: 2.5rem;    /* 40px 画面の主役の数字 */
    --ds-text-title: 1.25rem;  /* 20px 画面タイトル */
    --ds-text-lg: 1.0625rem;   /* 17px セクション見出し・リストの金額 */
    --ds-text-body: 0.9375rem; /* 15px 本文 */
    --ds-text-sub: 0.8125rem;  /* 13px 補足 */
    --ds-text-cap: 0.6875rem;  /* 11px ラベル・キャプション */

    /* 余白（4px 基準） */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 24px;
    --ds-space-6: 32px;
    --ds-gutter: 16px;         /* 画面左右の余白 */
    --ds-nav-height: 54px;     /* 下部メニューの高さ（端末の下の余白は別に足す） */
    /* 下部メニューの上に浮かせる部品（記録する・上に戻る等）の下端の位置 */
    --ds-above-nav: calc(var(--ds-nav-height) + 16px + env(safe-area-inset-bottom));

    /* 角丸（この4種類だけ使う） */
    --ds-radius-sm: 8px;       /* チップ・小さい部品 */
    --ds-radius-md: 12px;      /* ボタン・入力欄 */
    --ds-radius-lg: 18px;      /* カード */
    --ds-radius-pill: 999px;

    /* 動き */
    --ds-ease: cubic-bezier(0.2, 0, 0, 1);
    --ds-duration-fast: 120ms;
    --ds-duration: 200ms;

    /* 色（light） */
    --ds-color-bg: #f5f4f1;
    --ds-color-surface: #ffffff;
    --ds-color-surface-sunken: #e9e8e2; /* 背景との差が小さすぎて入力欄・ボタンの形が溶けていたので少し濃く（差 1.06→1.12） */
    --ds-color-ink: #16181d;
    --ds-color-ink-2: #5b616e;
    --ds-color-ink-3: #737986;         /* 薄い文字。面の上でも読めるよう濃いめに（入力欄の上で 2.26→3.56） */
    --ds-color-on-ink: #ffffff;
    --ds-color-hairline: rgba(22, 24, 29, 0.08);
    --ds-color-surface-glass: rgba(255, 255, 255, 0.82); /* 下部ナビ */
    --ds-color-bg-glass: rgba(245, 244, 241, 0.88);      /* 上部バー */
    --ds-color-focus: #1f6feb;
    /* 主ボタン・選択中の色。今はインク色（アプリの色を入れるならここを変える） */
    --ds-color-primary: var(--ds-color-ink);
    --ds-color-on-primary: var(--ds-color-on-ink);

    /* アプリの色（メダルの金色）。赤は「マイナス」、青は「プラス」の意味で使っているので避けた */
    --ds-color-accent: #ffb31a;        /* 少し明るい金（くすんで見えないように） */
    --ds-color-on-accent: #241700;
    --ds-color-accent-text: #9a5f00;   /* 白地に金色の文字を置くとき（読める濃さ） */
    --ds-color-accent-tint: rgba(255, 179, 26, 0.16);

    /*
     * 部品の色（どの画面でも同じ決まり）
     *   書く場所（テキストボックス）: 少し青みのある明るい面＋細い線。書いているあいだは白＋金の輪
     *   選ぶ・押す（札・切り替え・小さいボタン）: 選んでいない＝白地に線、選んでいる・控えめなボタン＝淡い金
     *   主ボタン: 金の塗り
     * 金は accent から作るので、視覚補助モード（紫）でもそのまま切り替わる
     */
    --ds-field-bg: #f3f6fb;
    --ds-field-line: #d9e0ea;
    --ds-control-bg: var(--ds-color-surface);
    --ds-control-line: #dcdfe5;
    --ds-control-ink: var(--ds-color-ink-2);
    --ds-track-bg: #eef1f6;              /* 切り替え（スロット/パチンコなど）の下地 */
    --ds-select-bg: color-mix(in srgb, var(--ds-color-accent) 17%, var(--ds-color-surface));
    --ds-select-line: var(--ds-color-accent);
    --ds-select-ink: var(--ds-color-accent-text);
    --ds-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ds-color-accent) 24%, transparent);

    /* ホームの今月の収支など「主役のカード」。明るいテーマでも暗い面にして1か所だけ目立たせる（グラデーションは使わない） */
    --ds-hero-bg: #1d2026;
    --ds-hero-ink: #ffffff;
    --ds-hero-ink-2: rgba(255, 255, 255, 0.64);
    --ds-hero-line: rgba(255, 255, 255, 0.12);
    --ds-hero-plus: #7cbcff;
    --ds-hero-minus: #ff8f85;

    --ds-color-plus: #1f6feb;
    --ds-color-plus-tint: rgba(31, 111, 235, 0.09);
    --ds-color-minus: #d4453b;
    --ds-color-minus-tint: rgba(212, 69, 59, 0.07);
    --ds-color-sunday: #d4453b;
    --ds-color-saturday: #1f6feb;
    --ds-color-danger: #d4453b;
    --ds-color-star: #f2a60c;

    /* 設定1〜6（判別結果の表・バー・円グラフで共通。低い設定は寒色、高い設定は暖色） */
    --ds-setting-1: rgb(67, 108, 180);
    --ds-setting-2: rgb(103, 169, 207);
    --ds-setting-3: rgb(144, 190, 109);
    /* 4〜6 は薄く敷いても見分けられるよう、色の方向を分けて（黄・橙・赤紫）濃さも段階的に。赤は「マイナス」なので6に使わない */
    --ds-setting-4: rgb(242, 190, 0);
    --ds-setting-5: rgb(240, 118, 30);
    --ds-setting-6: rgb(204, 60, 160);
    --ds-setting-1-tint: rgba(67, 108, 180, 0.14);
    --ds-setting-2-tint: rgba(103, 169, 207, 0.18);
    --ds-setting-3-tint: rgba(144, 190, 109, 0.2);
    --ds-setting-4-tint: rgba(242, 190, 0, 0.24);
    --ds-setting-5-tint: rgba(240, 118, 30, 0.30);
    --ds-setting-6-tint: rgba(204, 60, 160, 0.34);

    /* 影 */
    --ds-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.04);
    --ds-shadow-float: 0 8px 24px rgba(16, 24, 40, 0.18);
}

html.dark-mode {
    --ds-color-bg: #121418;
    --ds-color-surface: #1c1f24;
    --ds-color-surface-sunken: #262a31;
    --ds-color-ink: #eef1f5;
    --ds-color-ink-2: #a9b1bd;
    --ds-color-ink-3: #6f7784;
    --ds-color-on-ink: #121418;
    --ds-color-hairline: rgba(255, 255, 255, 0.08);
    --ds-color-surface-glass: rgba(28, 31, 36, 0.82);
    --ds-color-bg-glass: rgba(18, 20, 24, 0.88);
    --ds-color-focus: #66b0ff;

    --ds-color-accent: #f5b43c;
    --ds-color-on-accent: #241700;
    --ds-color-accent-text: #f5bf5a;
    --ds-color-accent-tint: rgba(245, 180, 60, 0.16);
    --ds-field-bg: #262b34;
    --ds-field-line: rgba(255, 255, 255, 0.10);
    --ds-control-line: rgba(255, 255, 255, 0.14);
    --ds-track-bg: #262b34;
    --ds-hero-bg: #272b32;
    --ds-hero-line: rgba(255, 255, 255, 0.1);

    --ds-color-plus: #6aaeff;
    --ds-color-plus-tint: rgba(106, 174, 255, 0.14);
    --ds-color-minus: #ff8a80;
    --ds-color-minus-tint: rgba(255, 138, 128, 0.11);
    --ds-color-sunday: #ff8a80;
    --ds-color-saturday: #6aaeff;
    --ds-color-danger: #ff8a80;
    --ds-color-star: #f7bf45;

    --ds-shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.04);
    --ds-shadow-float: 0 12px 32px rgba(0, 0, 0, 0.55);

    /* 暗い面の上では薄い色が沈むので少し濃く（ミッドナイトも同じ） */
    --ds-setting-4-tint: rgba(242, 190, 0, 0.26);
    --ds-setting-5-tint: rgba(240, 118, 30, 0.34);
    --ds-setting-6-tint: rgba(204, 60, 160, 0.42);
}

html.midnight-mode {
    --ds-color-bg: #0b1222;
    --ds-color-surface: #131c2e;
    --ds-color-surface-sunken: #1c2740;
    --ds-color-ink: #e6edf7;
    --ds-color-ink-2: #9fb0c6;
    --ds-color-ink-3: #62728a;
    --ds-color-on-ink: #0b1222;
    --ds-color-hairline: rgba(148, 163, 184, 0.14);
    --ds-color-surface-glass: rgba(19, 28, 46, 0.82);
    --ds-color-bg-glass: rgba(11, 18, 34, 0.88);
    --ds-color-focus: #7dd3fc;

    --ds-field-bg: #1c2740;
    --ds-field-line: rgba(148, 163, 184, 0.18);
    --ds-control-line: rgba(148, 163, 184, 0.24);
    --ds-track-bg: #1c2740;
    --ds-hero-bg: #22335a;
    --ds-hero-line: rgba(148, 163, 184, 0.16);

    --ds-color-plus: #7cb8ff;
    --ds-color-plus-tint: rgba(124, 184, 255, 0.14);
    --ds-color-minus: #fb8a9a;
    --ds-color-minus-tint: rgba(251, 138, 154, 0.11);
    --ds-color-sunday: #fb8a9a;
    --ds-color-saturday: #7cb8ff;
    --ds-color-danger: #fb8a9a;
    --ds-color-star: #f7bf45;

    --ds-shadow-card: 0 0 0 1px rgba(148, 163, 184, 0.06);
    --ds-shadow-float: 0 12px 32px rgba(2, 6, 23, 0.6);
}

/* 視覚補助モード: 正負を青/赤ではなく、色覚差の出にくい組み合わせに */
html.vision-assist-mode {
    --ds-color-plus: var(--theme-assist-positive);
    --ds-color-minus: var(--theme-assist-negative);
    --ds-color-plus-tint: rgba(15, 118, 110, 0.10);
    --ds-color-minus-tint: rgba(180, 83, 9, 0.10);
    --ds-color-sunday: var(--theme-assist-negative);
    /* マイナスが琥珀色になるので、アプリの色は金色をやめて紫にする（取り違え防止） */
    --ds-color-accent: #7c6cf2;
    --ds-color-on-accent: #ffffff;
    --ds-color-accent-text: #5a49d6;
    --ds-color-accent-tint: rgba(124, 108, 242, 0.14);
    --ds-hero-plus: #5eead4;
    --ds-hero-minus: #fbbf24;
}

html.vision-assist-mode.dark-mode {
    --ds-color-accent: #a397ff;
    --ds-color-on-accent: #16122e;
    --ds-color-accent-text: #b4aaff;
}

/* ------------------------------------------------------------------
 * 2. 旧テーマ変数（既存ページ用・移行完了まで維持）
 * ---------------------------------------------------------------- */
html {
    background-color: #ffffff;
    color: #212529;
    --theme-assist-positive: #0f766e;
    --theme-assist-negative: #b45309;
    --theme-assist-positive-bg: #115e59;
    --theme-assist-negative-bg: #92400e;
    --theme-root-bg: #212529;
    --theme-root-color: #f8f9fa;
    --theme-surface: #343a40;
    --theme-surface-strong: #495057;
    --theme-input-bg: #495057;
    --theme-input-focus-bg: #545d66;
    --theme-input-option-bg: #2b3138;
    --theme-input-strong-bg: #3a4253;
    --theme-border: #495057;
    --theme-border-muted: #6c757d;
    --theme-link: #66b0ff;
    --theme-link-hover: #99ccff;
    --theme-hover-row: #495057;
    --theme-nav-bg: rgba(40, 42, 46, 0.8);
    --theme-nav-border: rgba(255, 255, 255, 0.08);
    --theme-nav-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --theme-close-bg: rgba(45, 45, 45, 0.85);
    --theme-close-hover-bg: rgba(60, 60, 60, 1);
}

html.dark-mode {
    background-color: #171a1f;
    color: #f8f9fa;
    --theme-root-bg: #171a1f;
    --theme-assist-positive: #5eead4;
    --theme-assist-negative: #fbbf24;
    --theme-assist-positive-bg: #115e59;
    --theme-assist-negative-bg: #92400e;
}

html.midnight-mode {
    --theme-assist-positive: #5eead4;
    --theme-assist-negative: #fbbf24;
    --theme-assist-positive-bg: #115e59;
    --theme-assist-negative-bg: #92400e;
    --theme-root-bg: #0f172a;
    --theme-root-color: #f1f5f9;
    --theme-surface: #1e293b;
    --theme-surface-strong: #334155;
    --theme-input-bg: #223047;
    --theme-input-focus-bg: #2b3b56;
    --theme-input-option-bg: #142033;
    --theme-input-strong-bg: #27364d;
    --theme-border: #334155;
    --theme-border-muted: #475569;
    --theme-link: #7dd3fc;
    --theme-link-hover: #bae6fd;
    --theme-hover-row: #24344d;
    --theme-nav-bg: rgba(15, 23, 42, 0.82);
    --theme-nav-border: rgba(148, 163, 184, 0.16);
    --theme-nav-shadow: 0 8px 32px rgba(2, 6, 23, 0.48);
    --theme-close-bg: rgba(30, 41, 59, 0.85);
    --theme-close-hover-bg: rgba(51, 65, 85, 1);
}

/*
 * ---------- Bootstrap 5.3 の変数を、アプリの色に結び付ける ----------
 * Bootstrap の部品（入力欄・カード・表・小窓・一覧など）は、これらの変数で色・線・角丸が決まる。
 * アプリの色（--ds-*）はテーマごとに切り替わるので、ここで1回結び付ければ、ライト・ダーク・ミッドナイト・視覚補助の
 * どれでも Bootstrap の部品がアプリの色になる。Bootstrap 側の [data-bs-theme=dark] の値より後に読み込むので、こちらが勝つ。
 */
:root,
[data-bs-theme] {
    --bs-body-font-family: var(--ds-font-sans);
    --bs-body-color: var(--ds-color-ink);
    --bs-body-bg: var(--ds-color-surface);          /* Bootstrap ではカード・小窓・入力欄などの「面」の色にも使われる */
    --bs-emphasis-color: var(--ds-color-ink);
    --bs-secondary-color: var(--ds-color-ink-2);
    --bs-secondary-bg: var(--ds-color-surface-sunken);
    --bs-tertiary-color: var(--ds-color-ink-3);
    --bs-tertiary-bg: var(--ds-color-surface-sunken);
    --bs-heading-color: inherit;
    /* 区切り線・枠線。どのテーマでも見えるよう、文字の色を一定の割合で薄めて作る */
    --bs-border-color: color-mix(in srgb, var(--ds-color-ink) 16%, transparent);
    --bs-border-color-translucent: color-mix(in srgb, var(--ds-color-ink) 12%, transparent);
    --bs-border-radius: var(--ds-radius-md);
    --bs-border-radius-sm: var(--ds-radius-sm);
    --bs-border-radius-lg: var(--ds-radius-lg);
    --bs-border-radius-xl: var(--ds-radius-lg);
    --bs-border-radius-pill: var(--ds-radius-pill);
    --bs-focus-ring-color: color-mix(in srgb, var(--ds-color-focus) 35%, transparent);
}