/* A board's own colour ("Your colour"). accent.js sets the raw palette as inline custom properties on .app and flags it with
   data-accent-custom; this sheet re-declares the tokens that tokens.css resolves at :root (so inline changes would not reach them)
   and lets the pale tint show faintly through card paper. Load after theme-boards.css. */
.app[data-accent-custom] {
  --accent: var(--brand); --accent-2: var(--brand-2); --accent-ink: var(--brand-2); --accent-rgb: var(--brand-rgb);
  --gold: var(--brand); --gold-soft: color-mix(in srgb, var(--brand) 35%, transparent);
  --glow-accent: 0 0 0 1px rgba(var(--brand-rgb), 0.6); --glow-violet: var(--glow-accent); --glow-rose: var(--glow-accent);
  --focus-ring: rgba(var(--brand-rgb), 0.25); --brand-bg: var(--brand); --ember-color: var(--brand);
}
.app[data-accent-custom] .card { background: color-mix(in srgb, var(--accent-tint) 30%, var(--card-bg)); }
.app[data-accent-custom] .card:hover { border-color: rgba(var(--brand-rgb), 0.6); }
.app[data-accent-custom] .card.selected { border-color: rgba(var(--brand-rgb), 0.95); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.55), var(--card-shadow); }

/* Your colour controls in the Theme panel */
.accent-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 14px; }
.accent-picker input[type="color"] { width: 40px; height: 32px; padding: 0; border: 1px solid var(--glass-border-hi); border-radius: var(--radius-s); background: none; cursor: pointer; }
.accent-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.accent-chip { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--glass-border-hi); cursor: pointer; padding: 0; }
.accent-chip:hover { transform: translateY(-1px); }
.accent-chip.on { border-color: var(--ink-0); box-shadow: 0 0 0 2px var(--panel-bg), 0 0 0 4px var(--ink-0); }
.accent-chip:focus-visible, .accent-picker input[type="color"]:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.accent-preview { display: inline-flex; align-items: stretch; height: 32px; min-width: 120px; flex: 1; border: 1px solid var(--glass-border-hi); overflow: hidden; border-radius: var(--radius-s); }
.accent-preview b { flex: 1; display: grid; place-items: center; padding: 0 8px; font: 600 12px/1 var(--font-ui); letter-spacing: 0.08em; white-space: nowrap; }
.accent-preview i { width: 18px; }