/* ========================================
   THEME LIGHT
======================================== */
:root {
    /* 背景・サーフェス */
    --body-bg: #f5f7fa;
    --surface-color: #ffffff;
    --surface-soft: #fafafa;
    --surface-hover: #f0f0f0;
    --glass-bg: rgba(255, 255, 255, 0.5);

    /* テキスト */
    --body-text: #222222;
    --text-color: #4a4f54;
    --text-muted: #777777;
    --heading-color: #0c121c;
    --label-color: #222222;

    /* プライマリ（ブランドカラー） */
    --primary-color: #111111;
    --primary-hover: #333333;

    /* ボーダー */
    --border-color: #d0d7de;
    --border-soft: #eeeeee;
    --glass-border: rgba(0, 0, 0, 0.08);

    /* インプット */
    --input-bg: #ffffff;
    --input-border: rgba(0, 0, 0, 0.16);
    --input-text: #222222;
    --placeholder-color: #999999;

    /* ボタン */
    --button-bg: #111111;
    --button-text: #ffffff;

    /* 💡 スタイリッシュエラー専用カラー */
    --error-color: #d93025;
    --error-bg: #fffafa;
    --input-error-border: #d93025;
    --input-error-shadow: rgba(217, 48, 37, 0.06);
    --success-color: #4CAF50;

    /* エフェクト・影 */
    --shadow-rgb: 0, 0, 0;
    --focus-ring: rgba(0, 123, 255, 0.25);

    --box-shadow: rgba(12, 18, 28, 0.1);

    /* その他専用 */
    --qr-bg: #ffffff;
}