/* ========================================
   Layout Tool — Theme System
   Dark (default) / Light (.light-theme)
   ======================================== */

:root {
  /* ── Backgrounds ── */
  --bg-primary:    #0a0e14;
  --bg-surface:    #0d1017;
  --bg-elevated:   #0f1319;
  --bg-panel:      #1a1f29;
  --bg-hover:      #242a36;

  /* ── Borders ── */
  --border:        #2a2e35;
  --border-light:  #1a1f29;
  --border-focus:  var(--accent-gold);

  /* ── Text ── */
  --text-primary:   #b3b1ad;
  --text-secondary: #8a8d93;
  --text-muted:     #5c6068;
  --text-dim:       #3a3e45;

  /* ── Accent / Semantic ── */
  --accent-gold:   #e6b450;
  --accent-blue:   #599dda;
  --accent-green:  #7fd962;
  --accent-red:    #f26d78;
  --accent-purple: #c792ea;
  --accent-orange: #ff9e64;

  /* ── Fonts ── */
  --font-mono: 'Source Code Pro', 'Cascadia Code', 'Consolas', 'Monaco', monospace;
  --font-cjk:  'Noto Sans SC', 'Source Han Sans SC', 'Microsoft YaHei', sans-serif;

  /* ── Radius ── */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* ── Shadow ── */
  --shadow: 0 1px 4px rgba(0,0,0,0.3);

  /* ── Dim (translucent) variants for status backgrounds ── */
  --accent-blue-dim:   rgba(89, 157, 218, 0.15);
  --accent-green-dim:  rgba(127, 217, 98, 0.15);
  --accent-red-dim:    rgba(242, 109, 120, 0.15);
  --accent-orange-dim: rgba(255, 158, 100, 0.15);
  --primary-hover:     #4a8dc4;
}

/* ── Light Theme ── */
.light-theme {
  --bg-primary:    #f5f5f5;
  --bg-surface:    #ffffff;
  --bg-elevated:   #ffffff;
  --bg-panel:      #e8ecf0;
  --bg-hover:      #e0e4e8;

  --border:        #d0d4d8;
  --border-light:  #e0e0e0;
  --border-focus:  #c9a030;

  --text-primary:   #1a1a1a;
  --text-secondary: #555555;
  --text-muted:     #888888;
  --text-dim:       #aaaaaa;

  --accent-gold:   #c9a030;
  --accent-blue:   #1a73e8;
  --accent-green:  #188038;
  --accent-red:    #c5221f;
  --accent-purple: #8b5cf6;
  --accent-orange: #e88a4f;

  --accent-blue-dim:   #e8f0fe;
  --accent-green-dim:  #e6f4ea;
  --accent-red-dim:    #fce8e6;
  --accent-orange-dim: #fef7e0;
  --primary-hover:     #1558b0;

  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
}

/* ── Base ── */
body {
  font-family: var(--font-cjk);
  background: var(--bg-primary);
  color: var(--text-primary);
  margin: 0; padding: 0;
  font-size: 13px;
  line-height: 1.5;
  transition: background 0.2s, color 0.2s;
}

/* ── Theme Toggle ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 11px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.theme-toggle:hover {
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}

/* ── Scrollbar (dark) ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }