/* ── Quarterboard Design Tokens ─────────────────────────────────── */
:root {
  /* Primary */
  --color-primary:        #f96302;
  --color-primary-light:  rgba(249,99,2,.12);
  --color-primary-dark:   #d4540a;

  /* Semantic */
  --color-success:        #2e7d32;
  --color-success-light:  rgba(46,125,50,.12);
  --color-danger:         #c62828;
  --color-danger-light:   rgba(198,40,40,.08);
  --color-info:           #1565c0;
  --color-info-light:     rgba(21,101,192,.12);

  /* Neutrals */
  --color-text:           #333;
  --color-text-secondary: #666;
  --color-text-muted:     #aaa;
  --color-border:         rgba(0,0,0,.12);
  --color-border-strong:  rgba(0,0,0,.22);
  --color-surface:        #fff;
  --color-bg:             #f5f5f5;

  /* Toolbar (orange in light, dark in dark mode) */
  --color-toolbar-bg:     #f96302;

  /* Elevation */
  --shadow-1: 0 1px 3px rgba(0,0,0,.1);
  --shadow-2: 0 2px 8px rgba(0,0,0,.12);
  --shadow-3: 0 4px 16px rgba(0,0,0,.16);

  /* Shape */
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg: 10px;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(249,99,2,.25);
}

[data-theme="dark"] {
  --color-text:           #e8e8e8;
  --color-text-secondary: #aaa;
  --color-text-muted:     #666;
  --color-border:         rgba(255,255,255,.1);
  --color-border-strong:  rgba(255,255,255,.2);
  --color-surface:        #1e1e1e;
  --color-bg:             #121212;
  --color-toolbar-bg:     #2a2a2a;

  --shadow-1: 0 1px 3px rgba(0,0,0,.4);
  --shadow-2: 0 2px 8px rgba(0,0,0,.5);
  --shadow-3: 0 4px 16px rgba(0,0,0,.6);
}

/* ── Shared color picker component ── */
.memo-color-btn {
  position: relative;
  gap: 4px;
}

.memo-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.25);
  flex-shrink: 0;
}

.memo-color-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 8px;
  display: flex;
  gap: 6px;
  box-shadow: var(--shadow-3);
}

.memo-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  cursor: pointer;
  transition: transform .1s, border-color .1s;
  flex-shrink: 0;
}
.memo-swatch:hover { transform: scale(1.2); }
.memo-swatch.active { border-color: rgba(0,0,0,.6); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.memo-swatch:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* When dark mode + pastel note color: force dark text for legibility */
[data-theme="dark"] [data-note-color] .card-preview,
[data-theme="dark"] [data-note-color] .card-preview * { color: #333; }
[data-theme="dark"] [data-note-color] .card-preview .empty { color: #777; }
[data-theme="dark"] [data-note-color] .memo-textarea { color: #333; }
[data-theme="dark"] [data-note-color] .list-title { color: #222; }
[data-theme="dark"] [data-note-color] .list-preview,
[data-theme="dark"] [data-note-color] .list-meta { color: #555; }