/* Theme tokens (light/dark) */

/* ベースカラーパレット（テーマ共通） */
:root {
    --color-vrc-pink:        #F49BB8;
    --color-soft-sakura:     #F8C7D8;
    --color-very-light-pink: #FFF2F7;
    --color-soft-white:      #FAFAFB;
    --color-light-gray:      #ECECEF;
    --color-charcoal:        #2F3037;
    --color-charcoal-gray:   #4B4B52;
}

/* デフォルト（ライトモード）の配色 */
:root {
    --bg-image-color: var(--bg-color);
    --bg-color: rgba(255, 255, 255, 0.4); /* ページ全体の薄い重ね */
    --card-bg: rgba(250, 250, 251, 0.95);  /* カード・コンテナ用 */

    /* アクセントカラー（サクラピンク系） */
    --accent-color: var(--color-vrc-pink);
    --accent-hover: var(--color-soft-sakura);
    --accent-light: var(--color-very-light-pink);
    --accent-rgb: 244,155,184; /* for rgba(var(--accent-rgb),...) */
    --accent-shadow: rgba(244, 155, 184, 0.2);

    /* 汎用色 */
    --danger: #ff4d4d;
    /* 成功・ステータス色 */
    --success-bg: #DCFCE7;
    --success-text: #155724;
    --success-border: #c3e6cb;
    --on-accent: #ffffff;
    --disabled-bg: rgba(255,255,255,0.38);
    --glass-60: rgba(255, 255, 255, 0.6);
    --overlay-dark-70: rgba(0, 0, 0, 0.7);
    --shadow-ink-10: rgba(0, 0, 0, 0.1);
    --text-shadow-light-80: var(--glass-60);
    /* 汎用色（ライト） */
    --off-white: var(--accent-light);
    --text-strong: var(--color-charcoal);
    --text-primary: var(--color-charcoal-gray);
    --table-label: #6c757d;
    --table-value: #212529;
    --placeholder-text: #8a8f98;
    --surface-neutral: var(--color-soft-white);
    --surface-neutral-strong: var(--color-light-gray);
    --border-light: var(--surface-neutral-strong);
    --vr-blue: #007bff;
    --orange: #ffa500;
    --green-1: #4caf50;
    --green-2: #8bc34a;
    --red-strong: #e03a3d;
    --pale-pink: #ffeef2;
    --rank-visitor-color: #858585;
    --rank-new-user-color: #1778ff;
    --rank-user-color: #2bcf5c;
    --rank-known-color: #ff8b17;
    --rank-trusted-color: #bf17ff;
    --vrc-status-color: #3c35c6;
    --vrc-plate-bg: #605458;
    --vrc-nickname-color: #fcf0f3;
    --like-color: #ff6b81;
    --like-hover-color: #ff4757;
    --dislike-color: #703b44;
    --complete-color: #ff9800;
    --signup-button-bg: #ff5e66;
    --signup-button-hover: #ff555e;
    --danger-button-bg: #e74c3c;
    --danger-button-hover: #c0392b;
    --x-share-bg: #0f1419;
    --x-share-hover-bg: #4a5156;

    --error-bg: #FEE2E2;
    --error-border: #EF4444;
    --error-text: #991B1B;
}

/* ダークモード用の配色（data-theme="dark" が付与されたとき） */
[data-theme="dark"] {
    --bg-image-color: rgba(47, 48, 55, 0.75);
    --bg-color: rgba(47, 48, 55, 0.65);
    --card-bg: rgba(47, 48, 55, 0.88);

    /* ダークでもアクセントは活かす（必要なら調整） */
    --accent-color: var(--color-vrc-pink);
    --accent-hover: var(--color-soft-sakura);
    --accent-light: #fff2f790;
    --accent-rgb: 244,155,184;
    --accent-shadow: rgba(244, 155, 184, 0.12);

    --danger: #ff6b6b;
    --success-bg: #143d22; /* darker but subtle - fallback */
    --success-text: #d8fff0;
    --success-border: rgba(20,61,34,0.25);
    --error-bg: #3b171b;
    --error-border: var(--danger);
    --error-text: #ffd5d8;
    --on-accent: #ffffff;
    --disabled-bg: rgba(0,0,0,0.18);
    --glass-60: rgba(62, 62, 62, 0.6);
    --overlay-dark-70: rgba(0, 0, 0, 0.7);
    --shadow-ink-10: rgba(0, 0, 0, 0.1);
    --text-shadow-light-80: var(--overlay-dark-70);
    /* 汎用色（ダーク） */
    --off-white: var(--surface-neutral-strong);
    --text-strong: var(--color-soft-white);
    --text-primary: var(--color-soft-white);
    --table-label: var(--color-light-gray);
    --table-value: var(--color-soft-white);
    --placeholder-text: #b7bac3;
    --surface-neutral: var(--color-charcoal);
    --surface-neutral-strong: var(--color-charcoal-gray);
    --border-light: rgba(236,236,239,0.2);
    --vr-blue: #4da3ff;
    --orange: #ffb84d;
    --green-1: #2e7d32;
    --green-2: #4caf50;
    --red-strong: var(--danger);
    --pale-pink: #2a1a1a; /* dark fallback (unused visually) */
    --rank-visitor-color: #9a9a9a;
    --rank-new-user-color: #6fb1ff;
    --rank-user-color: #6fe08b;
    --rank-known-color: #ffc06a;
    --rank-trusted-color: #d78bff;
    --vrc-status-color: #9fb3ff;
    --vrc-plate-bg: #605458;
    --vrc-nickname-color: #f3e7eb;
    --like-color: #ff8ea0;
    --like-hover-color: #ff758d;
    --dislike-color: #b18a93;
    --complete-color: var(--orange);
    --signup-button-bg: #ff7077;
    --signup-button-hover: #ff626b;
    --danger-button-bg: var(--danger);
    --danger-button-hover: #ff5b5b;
    --x-share-bg: #1f2933;
    --x-share-hover-bg: #3b4752;
}