/*
 * grabado: テーマが決める値（#169）。テーマ非依存のトークンは styles/base.css の :root。
 *
 * ★ 値は 1 つも新しく作っていない。このファイルにあった literal を、出てくる場所から
 *   そのまま持ち上げただけである（#169 の「見た目は 1 ピクセルも変えない」）。
 *
 * ★★ 色は 1 回しか出ないものもトークンにした。余白や角丸と違い、
 *   **色はテーマが変われば全部変わる** —— #172 でダークを足すときに、
 *   literal で残っていると探し直すことになる。
 */
:root {
    /* ★ #172 で足した。<select> のポップアップ・スクロールバー・フォームの既定色が
       テーマに追従する（ダーク側と対称にしてある） */
    color-scheme: light;

    /* 面 */
    --surface: #FFF;
    --surface-alt: #f2f2f2;
    --surface-sunken: whitesmoke;
    --canvas-grid: url(../images/back_dim.png);

    /* 文字 */
    --text: rgba(0, 0, 0, .87);
    --text-muted: rgba(0, 0, 0, .6);
    --on-accent: #FFF;

    /* 線 */
    --border: rgba(0, 0, 0, .26);
    --divider: #ddd;
    --port-border: rgba(0, 0, 0, .3);
    --port-border-hover: rgba(0, 0, 0, .8);
    --row-expanded-border: rgba(0, 0, 0, .12);

    /*
     * ブランドとアクセント。--brand は favicon と同じ色。
     *
     * ★★ #171 で 5 つ暗くした —— **白い文字を載せる面なのに WCAG AA（4.5:1）に
     *   届いていなかった**（2026-09-06 実測。--accent 3.33 ／ --brand-hover 2.95 ／
     *   --info 3.12 ／ --info-hover 2.77 ／ --danger 3.68）。--brand（#de2665）は
     *   4.59 で足りているので**据え置き**。
     * ★ hover が「明るくなる」から「暗くなる」に変わった —— 明るい側で 4.5:1 を
     *   保てる色が、元の色調から離れすぎるため。値は tests/node/styles.test.ts が縛る。
     */
    --brand: #de2665;
    --brand-hover: #ad1457;
    --brand-soft: #ff8fb5;
    --accent: #d81b60;
    --accent-soft: rgba(255, 64, 129, 0.5);

    /* 状態 */
    /* base.css の既定（#1565c0）を上書きする。#171 */
    --focus: #1565c0;
    --info: #1565c0;
    --info-hover: #0d47a1;
    --danger: #d32f2f;
    --danger-hover: #b71c1c;
    --invalid: #d32f2f;
    --hint: rgb(125, 178, 221);

    /* 影 */
    --shadow-button: 0 0 2px rgba(0, 0, 0, .12), 0 2px 2px rgba(0, 0, 0, .2);
    --shadow-card: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
    --shadow-bar: rgba(0, 0, 0, 0.16) 0px 3px 6px 0px, rgba(0, 0, 0, 0.23) 0px 3px 6px 0px;
    --shadow-minimap: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
    --shadow-window: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);

    /* 寸法。original は 150px なので、テーマが決める値である */
    --bar-w: 190px;
    --minimap-size: 100px;
    --io-min-w: 860px;
}