/* AUTO-GENERATED from design/tokens.css by scripts/build-tokens.js — 直接編集しないこと */
/* ============================================================
   わかば・デザイントークン（全アプリ共通・単一の真実）
   ------------------------------------------------------------
   ここが実体。解説と採用理由は docs/design-tokens.md を参照。
   各アプリへは `node scripts/build-tokens.js` がコピーする。
   apps/<app>/tokens.css は自動生成のため直接編集しない。
   ============================================================ */

:root {
    /* ---- ニュートラル ---- */
    --rt-ink:        #4A3F35;  /* 本文 */
    --rt-ink-soft:   #7A6A5B;  /* 補足・注記 */
    --rt-ink-faint:  #A39481;  /* プレースホルダ・控えめなリンク */
    --rt-heading:     #5B4632;  /* h1/h2（入口アプリの見出し） */
    --rt-line:        #EADFD0;  /* 罫線（ベージュ系。入口アプリの枠） */
    --rt-line-strong: #D8C6AE;  /* 白地の輪郭ボタン（文字サイズ・QR・もう一度見る）の枠 */
    --rt-card:        #FFFFFF;

    /* 消極ボタン（画面を閉じる・戻る等） */
    --rt-gray-bg:   #EDEBE7;
    --rt-gray-ink:  #6B6560;
    --rt-gray-line: #D5D0C9;

    /* ---- 基調（わかば） ---- */
    --rt-primary:       #3E7D4F;  /* 進む・確定・ヘッダ */
    --rt-primary-dark:  #326941;  /* hover / 見出し文字 */
    --rt-primary-light: #EFF7E4;  /* 淡背景・hover 面・前回の回答 */
    --rt-accent:        #5FA463;  /* 目印・選択強調（同意チェックの枠など）。
                                     ボタン面や画面ヘッダには使わない＝白文字で 3.0:1 しかなくAAに届かない */
    --rt-primary-track: #C7E0C4;  /* スライダーのトラック始点(primary へのグラデーション) */
    --rt-primary-muted: #9DBD9F;  /* 送信済みの主ボタン・穏やかな緑の枠 */
    --rt-primary-line:  #CFE6CC;  /* 淡い緑の枠（肯定的な注記ボックス） */
    --rt-primary-rgb:   62, 125, 79;  /* 影の rgba() 用 */

    /* ---- 差し色 ----
       黄は「あなたの回答／いま選んでいる選択肢」専用。他の意味には使わない。
       注意・警告に黄を使いたい場合は --rt-caution 系を用いる。 */
    --rt-answer:     #FFE9A8;
    --rt-answer-ink: #4A3F35;

    /* ---- 面・背景 ---- */
    --rt-bg:      #FFF9F0;  /* アプリ全体の地色 */
    --rt-bg-chat: #F4F9F1;  /* チャット面 */
    --rt-border:  #DCE8D8;  /* 罫線（緑系。チャット部品の枠） */

    /* 入口アプリのランディングは、読み進めるにつれて地色がゆっくり変わる */
    --rt-stage-hero:    #FFF9F0;
    --rt-stage-benefit: #FDF1E3;
    --rt-stage-sample:  #EFF7EC;
    --rt-stage-cta:     #F3F8EF;
    --rt-stage-consent: #FFFDF8;

    /* ---- 意味色 ---- */
    --rt-error:        #C54B4B;  /* エラー文字・危険操作の主色 */
    --rt-error-ink:    #A04A3E;  /* エラー通知の本文（面が淡いときの濃い赤茶） */
    --rt-error-line:   #E4B7B7;  /* エラー通知・控えめな危険ボタンの枠 */
    --rt-error-light:  #FBEAEA;  /* 失敗アイコンの面・危険ボタンの hover 面 */
    --rt-ok:           #2E7D52;
    --rt-caution:      #FDF0DA;  /* 注意帯の面（琥珀。黄の差し色と混同しない明度） */
    --rt-caution-line: #E0A64B;  /* 注意帯の左罫線 */
    --rt-caution-ink:  #8A5A00;  /* 注意帯の文字 */

    /* ---- 医師アプリ基調（PC向け・可読性優先の変種） ---- */
    --rt-doctor-bg:   #FAF7F1;
    --rt-doctor-ink:  #423B31;
    --rt-doctor-line: #D9D2C4;

    /* ---- 影 ----
       影は黒ではなく暖色（木漏れ日の影）で統一する。黒い影は生成りの背景の上で
       灰色に濁って見え、わかばの空気感を壊すため使わない。 */
    --rt-shadow-hairline: 0 1px 3px rgba(122, 96, 60, .08);  /* 選択肢など、輪郭を少し浮かせるだけ */
    --rt-shadow-soft:     0 2px 8px rgba(122, 96, 60, .10);  /* 白い面（バブル・入力エリア） */
    --rt-shadow-card:     0 4px 14px rgba(122, 96, 60, .10);
    --rt-shadow-bubble:   0 2px 8px rgba(122, 96, 60, .18);  /* 黄の回答バブル（面が濃いぶん強め） */
    --rt-shadow-dialog:   0 12px 40px rgba(122, 96, 60, .22);
    --rt-shadow-device:   0 18px 40px rgba(90, 70, 40, .22);   /* スマホ枠のモック（入口・医師で共通） */
    /* 主ボタンの影は基調色。大＝入口アプリの大きなCTA、小＝問診アプリの決定ボタン。
       .rt-sample で青版を再宣言しているため、入れ子の var() は使わない（§落とし穴）。 */
    --rt-shadow-primary:    0 6px 16px rgba(62, 125, 79, .32);
    --rt-shadow-primary-sm: 0 2px 8px rgba(62, 125, 79, .30);

    /* ---- スマホ枠のモック（入口アプリのデモ／医師アプリの設問プレビューで共通） ---- */
    --rt-device-frame: #4E4438;
    --rt-device-notch: #2E2822;

    /* ---- 幕（ダイアログの下地） ----
       患者アプリは白のベール（まぶしくなく、背後の文脈が残る）。
       医師アプリと入口アプリのダイアログは暗幕。§統一の余地あり（docs §2 参照）。 */
    --rt-scrim:     rgba(255, 255, 255, .85);
    --rt-scrim-dim: rgba(60, 50, 40, .45);

    /* ---- 形 ---- */
    --rt-radius-pill:   999px;  /* 主要動作ボタン・選択肢 */
    --rt-radius-card:   20px;   /* カード面 */
    --rt-radius-box:    16px;   /* 文中の囲み（注記・チェック枠・QR枠） */
    --rt-radius-field:  12px;   /* 入力欄 */
    --rt-radius-dialog: 22px;

    /* ---- 文字サイズ倍率（標準1 / 大1.2 / 特大1.44。JS が documentElement に上書き） ---- */
    --fs: 1;
}

/* ============================================================
   評価用サンプル（青フレーム）のテーマスコープ
   ------------------------------------------------------------
   「これは評価用サンプルである」ことを示す外枠・メタUIに付ける。
   個別プロパティを青で上書きするのではなく、変数ごと差し替えるため、
   内側の部品（ボタン・入力・スピナー等）は自動的に青系になる。
   本編コンテンツには付けない（サンプルでも本編は緑のまま）。

   ★ --rt-shadow-primary は :root で値が確定してしまうため、
     var(--rt-primary-rgb) を経由させず完成した値をここで再宣言する。
   ============================================================ */
.rt-sample {
    --rt-primary:       #2E86BE;
    --rt-primary-dark:  #256D9B;
    --rt-primary-light: #EAF5FB;
    --rt-accent:        #56A8D8;
    --rt-primary-rgb:   46, 134, 190;
    --rt-heading:       #1D6E9E;
    --rt-line:          #BFE2F2;
    --rt-border:        #BFE2F2;
    --rt-shadow-primary:    0 4px 12px rgba(46, 134, 190, .28);
    --rt-shadow-primary-sm: 0 2px 8px rgba(46, 134, 190, .30);
}