[data-theme="jellybean"] {
  --cream:     #f7f7f7;
  --card:      #ebebeb;
  --card-done: #f0f0f0;
  --ink:       #1a1a1a;
  --muted:     #888;
  --coral:     #d95f3b;
  --teal:      #3ab5b0;
  --orange:    #f5a030;
  --blue:      #3a6bbf;
}

/* ── full-card jellybean colors — all 10 ─────────────────────────── */
[data-theme="jellybean"] li[data-color="red"]    { background: #f54a00; }
[data-theme="jellybean"] li[data-color="teal"]   { background: #00a2b0; }
[data-theme="jellybean"] li[data-color="orange"] { background: #eb7000; }
[data-theme="jellybean"] li[data-color="blue"]   { background: #3480e8; }
[data-theme="jellybean"] li[data-color="green"]  { background: #2b8800; }
[data-theme="jellybean"] li[data-color="purple"] { background: #a22be7; }
[data-theme="jellybean"] li[data-color="pink"]   { background: #f01880; }
[data-theme="jellybean"] li[data-color="yellow"] { background: #f0d000; }
[data-theme="jellybean"] li[data-color="lime"]   { background: #93d80e; }
[data-theme="jellybean"] li[data-color="gray"]   { background: #828e90; }

/* ── white text on colored cards ─────────────────────────────────── */
[data-theme="jellybean"] li[data-color] .todo-text { color: #fff; }
[data-theme="jellybean"] li[data-color] .add-due   { color: rgba(255,255,255,0.7); }
[data-theme="jellybean"] li[data-color] .add-due:hover { color: #fff; }
[data-theme="jellybean"] li[data-color] .due-label { color: rgba(255,255,255,0.85); font-weight: 700; }

[data-theme="jellybean"] li[data-color] .delete    { color: rgba(255,255,255,0.5); }
[data-theme="jellybean"] li[data-color] .delete:hover { color: #fff; }

/* yellow and lime are light — use dark text */
[data-theme="jellybean"] li[data-color="yellow"] .todo-text,
[data-theme="jellybean"] li[data-color="lime"]   .todo-text { color: rgba(0,0,0,0.85); }
[data-theme="jellybean"] li[data-color="yellow"] .due-label,
[data-theme="jellybean"] li[data-color="lime"]   .due-label { color: rgba(0,0,0,0.6); }
[data-theme="jellybean"] li[data-color="yellow"] .add-due,
[data-theme="jellybean"] li[data-color="lime"]   .add-due { color: rgba(0,0,0,0.4); }
[data-theme="jellybean"] li[data-color="yellow"] .add-due:hover,
[data-theme="jellybean"] li[data-color="lime"]   .add-due:hover { color: rgba(0,0,0,0.75); }
[data-theme="jellybean"] li[data-color="yellow"] .delete,
[data-theme="jellybean"] li[data-color="lime"]   .delete { color: rgba(0,0,0,0.3); }
[data-theme="jellybean"] li[data-color="yellow"] .delete:hover,
[data-theme="jellybean"] li[data-color="lime"]   .delete:hover { color: rgba(0,0,0,0.65); }
[data-theme="jellybean"] li[data-color="yellow"] .check,
[data-theme="jellybean"] li[data-color="lime"]   .check { background: rgba(0,0,0,0.1); border-color: rgba(0,0,0,0.2); }
[data-theme="jellybean"] li[data-color="yellow"].done .check,
[data-theme="jellybean"] li[data-color="lime"].done   .check { background: rgba(0,0,0,0.22); border-color: rgba(0,0,0,0.22); }
[data-theme="jellybean"] li[data-color="yellow"] .color-btn,
[data-theme="jellybean"] li[data-color="lime"]   .color-btn { background: rgba(0,0,0,0.12) !important; }

/* ── checkbox on colored cards ───────────────────────────────────── */
[data-theme="jellybean"] li[data-color] .check {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.45);
}

[data-theme="jellybean"] li[data-color].done .check {
  background: rgba(255,255,255,0.55);
  border-color: rgba(255,255,255,0.55);
}

/* ── show color dot in this theme ────────────────────────────────── */
[data-theme="jellybean"] .color-btn  { display: flex; }

/* color dot on colored cards: white circle */
[data-theme="jellybean"] li[data-color] .color-btn {
  background: rgba(255,255,255,0.35) !important;
}

/* ── done state ──────────────────────────────────────────────────── */
[data-theme="jellybean"] li.done .todo-text { color: var(--muted); }

/* ── settings / pickers ──────────────────────────────────────────── */
[data-theme="jellybean"] #settings-menu { background: #fff; border-color: #e0e0e0; }
[data-theme="jellybean"] .settings-item:hover { background: #f5f5f5; }
[data-theme="jellybean"] .settings-divider { background: #ececec; }