/*
 * テーマの色トークン。ログイン後のページで読み込む（layouts/partials/theme-head）。
 * ライトの値は既存画面の色そのもの。ダークは <html data-theme="dark"> のときだけ効く。
 * 画面ごとのダーク調整は public/css/theme/dark/ に置き、ここのトークンを使う。
 */
:root {
    color-scheme: light;

    --r-bg: #ffffff;         /* ページの地 */
    --r-surface: #ffffff;    /* カード・パネル */
    --r-surface2: #f7f8fa;   /* 一段沈んだ面（表の見出し・入力欄の地） */
    --r-surface3: #eef1f4;   /* さらに沈んだ面（ホバー・選択中のタブ） */

    --r-ink: #1d1d1f;        /* 本文・見出し */
    --r-ink2: #3c4043;       /* 補助的な本文 */
    --r-sub: #5f6368;        /* 説明文 */
    --r-mute: #9aa0a6;       /* 注記・無効 */

    --r-line: #e2e5eb;       /* 区切り線・枠 */
    --r-line2: #d1d5db;      /* 強めの枠（入力欄） */

    --r-brand: #1976d2;      /* ボタン・強調の青 */
    --r-brand-ink: #ffffff;  /* ブランド色の上の文字 */
    --r-brand-soft: #e8f1fb; /* ブランド色の淡い地 */
    --r-link: #1976d2;

    --r-ok: #1a7f4b;
    --r-ok-soft: #e6f4ec;
    --r-ng: #d32f2f;
    --r-ng-soft: #fdecea;
    --r-warn: #b26a00;
    --r-warn-soft: #fff4e0;

    --r-code-bg: #f6f8fa;
    --r-paper: #ffffff;      /* 本文の図（白地の画像）を載せる紙面 */
    --r-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --r-bg: #131518;
    --r-surface: #1b1e22;
    --r-surface2: #22262b;
    --r-surface3: #2b3036;

    --r-ink: #e6e8eb;
    --r-ink2: #c9cdd2;
    --r-sub: #a1a8b0;
    --r-mute: #737a83;

    --r-line: #2e3339;
    --r-line2: #3c434b;

    --r-brand: #4c9be8;
    --r-brand-ink: #0d1117;
    --r-brand-soft: #1b2b3f;
    --r-link: #7ab4f5;

    --r-ok: #6cc08b;
    --r-ok-soft: #17291f;
    --r-ng: #f07a72;
    --r-ng-soft: #33191a;
    --r-warn: #e0b25c;
    --r-warn-soft: #2f2615;

    --r-code-bg: #161b22;
    --r-paper: #e8eaed;
    --r-shadow: none;
}