/* ========================================================== THEME TOKENS (unified) - で切替 - app.css はここで定義した変数のみ参照（色は直書きしない） ========================================================== */ /* ===== Default (Dark-ish baseline) ===== */ :root{ /* Core */ --bg:#0f1115; --panel:#171a21; --card:#0d1016; --ink:#eaeef6; --muted:#9aa4b2; --border:#242a36; --accent:#F5B400; /* 山吹色 */ --accent-ink:#0b0d12; /* Aliases for legacy names */ --border-color: var(--border); --btn-fg: var(--ink); /* Components */ --chip-bg:#11141a; --soft-shadow: 0 16px 40px rgba(0,0,0,.45); /* Buttons */ --btn-bg:#1c2230; --btn-border:#2a3242; --btn-ink:var(--ink); --btn-primary-bg:#133146; --btn-primary-border:#205472; --btn-primary-ink:var(--ink); /* Inputs / Preview */ --input-bg:var(--card); --input-border:#272c38; --input-ink:var(--ink); --preview-bg:#0b0e13; --preview-border:#2a3242; /* Gallery (sg-*) */ --sg-bg: var(--bg); --sg-panel: var(--panel); --sg-text: var(--ink); --sg-muted: var(--muted); --sg-border: var(--border); --sg-card:#1b1f27; --sg-card-hover:#202531; --sg-thumb-bg:#0f1115; --sg-chip-bg:#11141a; /* Danger (delete/reset) */ --danger-bg:#2a1216; --danger-border:#4a1b22; --danger-ink:#ffd5df; /* Radii */ --radius: 12px; --radius-pill: 14px; } /* ===== Light ===== 明るめライトグレー × くすんだ水色 */ :root[data-theme="light"]{ --bg:#edf1f5; --panel:#ffffff; --card:#f6f8fb; --ink:#0f172a; --muted:#526070; --border:#d7dde6; --accent:#7cc4da; /* くすんだ水色 */ --accent-ink:#083344; --border-color: var(--border); --btn-fg: var(--ink); --chip-bg:#eef3f8; --soft-shadow: 0 18px 36px rgba(10,20,40,.12); --btn-bg: color-mix(in srgb, var(--card) 92%, var(--panel) 8%); --btn-border: var(--border); --btn-ink: var(--ink); --btn-primary-bg: var(--accent); --btn-primary-border: var(--accent); --btn-primary-ink: var(--accent-ink); --input-bg: var(--card); --input-border: var(--border); --input-ink: var(--ink); --preview-bg: var(--card); --preview-border: var(--border); --sg-bg: var(--bg); --sg-panel: var(--panel); --sg-text: var(--ink); --sg-muted: #607285; --sg-border: var(--border); --sg-card:#f9fbfe; --sg-card-hover:#f2f6fb; --sg-thumb-bg:#e9eef6; --sg-chip-bg:#eef3f8; /* Danger（ライトは明るいピンク） */ --danger-bg:#ffdbe6; --danger-border:#ffc6d6; --danger-ink:#a31233; } /* ===== Dark ===== (明示再掲：上書きが必要なものだけ) */ :root[data-theme="dark"]{ --accent:#F5B400; --accent-ink:#0b0d12; --sg-card:#1b1f27; --sg-card-hover:#202531; --sg-thumb-bg:#0f1115; --sg-chip-bg:#11141a; --danger-bg:#2a1216; --danger-border:#4a1b22; --danger-ink:#ffd5df; } /* System preference (保険) */ @media (prefers-color-scheme: light){ :root:not([data-theme]){ color-scheme: light; } } @media (prefers-color-scheme: dark){ :root:not([data-theme]){ color-scheme: dark; } } /* ===== Themed component overrides (優しく上書き) ===== */ [data-theme] body{ background: var(--bg) !important; color: var(--ink) !important; } [data-theme] .app-header{ background: color-mix(in srgb, var(--bg) 85%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); } [data-theme] .group{ background: var(--panel) !important; border-color: var(--border) !important; box-shadow: var(--soft-shadow); } [data-theme] .preview-wrap{ background: var(--preview-bg) !important; border-color: var(--preview-border) !important; } [data-theme] input[type="text"], [data-theme] input[type="number"], [data-theme] select{ background: var(--input-bg) !important; color: var(--input-ink) !important; border: 1px solid var(--input-border) !important; } [data-theme] input::placeholder{ color: var(--muted); } [data-theme] .btn, [data-theme] .icon-btn{ background: var(--btn-bg) !important; color: var(--btn-ink) !important; border: 1px solid var(--btn-border) !important; } [data-theme] .btn:hover, [data-theme] .icon-btn:hover{ background: color-mix(in srgb, var(--btn-bg) 92%, var(--panel) 8%) !important; } [data-theme] .btn.primary{ background: var(--btn-primary-bg) !important; color: var(--btn-primary-ink) !important; border-color: var(--btn-primary-border) !important; } [data-theme] .btn.danger, [data-theme] .reset-btn { background: var(--danger-bg) !important; border-color: var(--danger-border) !important; color: var(--danger-ink) !important; } [data-theme] .font-credit{ background: var(--panel); border-color: var(--border); color: var(--muted); } [data-theme] .subtle, [data-theme] .note{ color: var(--muted); } [data-theme] .layer-item{ background: var(--card) !important; border-color: var(--border) !important; } /* Gallery bits */ [data-theme] .sg-card{ background: var(--card); border-color: var(--border); } [data-theme] .sg-card.is-selected{ outline: 2px solid var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent); } [data-theme] .sg-tab[aria-selected="true"]{ background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-ink) !important; } [data-theme] .sg-lock{ position:absolute; right:8px; top:8px; font-size:10px; letter-spacing:.08em; background:#111827; color:#f9fafb; border:1px solid #1f2937; border-radius:6px; padding:4px 6px; opacity:.85; } /* Loading */ [data-theme] .loading{ background: color-mix(in srgb, var(--bg) 88%, #000 12%); } [data-theme] .loading-panel{ background: var(--panel); color: var(--ink); border:1px solid var(--border); box-shadow: var(--soft-shadow); } [data-theme] .spinner{ fill: var(--accent); } /* Focus ring */ :root[data-theme] *:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } .is-hidden { display: none !important }