/* Shared 10-hue palette for Notes folders and note color stripes.
   Resolution: note.Color -> folder.Color -> neutral (no class). */

:root {
    --note-rose-bg: #fce4ec;
    --note-rose-border: #f48fb1;
    --note-rose-fg: #880e4f;

    --note-coral-bg: #fbe9e7;
    --note-coral-border: #ffab91;
    --note-coral-fg: #bf360c;

    --note-amber-bg: #fff8e1;
    --note-amber-border: #ffe082;
    --note-amber-fg: #ff6f00;

    --note-lime-bg: #f9fbe7;
    --note-lime-border: #dce775;
    --note-lime-fg: #827717;

    --note-emerald-bg: #e8f5e9;
    --note-emerald-border: #81c784;
    --note-emerald-fg: #1b5e20;

    --note-teal-bg: #e0f2f1;
    --note-teal-border: #80cbc4;
    --note-teal-fg: #004d40;

    --note-sky-bg: #e1f5fe;
    --note-sky-border: #81d4fa;
    --note-sky-fg: #01579b;

    --note-indigo-bg: #e8eaf6;
    --note-indigo-border: #9fa8da;
    --note-indigo-fg: #1a237e;

    --note-violet-bg: #f3e5f5;
    --note-violet-border: #ce93d8;
    --note-violet-fg: #4a148c;

    --note-slate-bg: #eceff1;
    --note-slate-border: #b0bec5;
    --note-slate-fg: #263238;
}

/* Dark note hues — system dark OR explicit data-theme="dark" */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --note-rose-bg: #4a1528;
        --note-rose-border: #c2185b;
        --note-rose-fg: #f8bbd0;

        --note-coral-bg: #4a1f14;
        --note-coral-border: #e64a19;
        --note-coral-fg: #ffccbc;

        --note-amber-bg: #3e2f0a;
        --note-amber-border: #ff8f00;
        --note-amber-fg: #ffe082;

        --note-lime-bg: #2e3310;
        --note-lime-border: #afb42b;
        --note-lime-fg: #e6ee9c;

        --note-emerald-bg: #0f2e16;
        --note-emerald-border: #43a047;
        --note-emerald-fg: #a5d6a7;

        --note-teal-bg: #0a2e2b;
        --note-teal-border: #00897b;
        --note-teal-fg: #80cbc4;

        --note-sky-bg: #0a2a3a;
        --note-sky-border: #0288d1;
        --note-sky-fg: #81d4fa;

        --note-indigo-bg: #1a1f45;
        --note-indigo-border: #5c6bc0;
        --note-indigo-fg: #c5cae9;

        --note-violet-bg: #2a1538;
        --note-violet-border: #8e24aa;
        --note-violet-fg: #e1bee7;

        --note-slate-bg: #1c2428;
        --note-slate-border: #607d8b;
        --note-slate-fg: #cfd8dc;
    }
}

:root[data-theme="dark"] {
    --note-rose-bg: #4a1528;
    --note-rose-border: #c2185b;
    --note-rose-fg: #f8bbd0;

    --note-coral-bg: #4a1f14;
    --note-coral-border: #e64a19;
    --note-coral-fg: #ffccbc;

    --note-amber-bg: #3e2f0a;
    --note-amber-border: #ff8f00;
    --note-amber-fg: #ffe082;

    --note-lime-bg: #2e3310;
    --note-lime-border: #afb42b;
    --note-lime-fg: #e6ee9c;

    --note-emerald-bg: #0f2e16;
    --note-emerald-border: #43a047;
    --note-emerald-fg: #a5d6a7;

    --note-teal-bg: #0a2e2b;
    --note-teal-border: #00897b;
    --note-teal-fg: #80cbc4;

    --note-sky-bg: #0a2a3a;
    --note-sky-border: #0288d1;
    --note-sky-fg: #81d4fa;

    --note-indigo-bg: #1a1f45;
    --note-indigo-border: #5c6bc0;
    --note-indigo-fg: #c5cae9;

    --note-violet-bg: #2a1538;
    --note-violet-border: #8e24aa;
    --note-violet-fg: #e1bee7;

    --note-slate-bg: #1c2428;
    --note-slate-border: #607d8b;
    --note-slate-fg: #cfd8dc;
}

.note-color-rose { --note-bg: var(--note-rose-bg); --note-border: var(--note-rose-border); --note-fg: var(--note-rose-fg); }
.note-color-coral { --note-bg: var(--note-coral-bg); --note-border: var(--note-coral-border); --note-fg: var(--note-coral-fg); }
.note-color-amber { --note-bg: var(--note-amber-bg); --note-border: var(--note-amber-border); --note-fg: var(--note-amber-fg); }
.note-color-lime { --note-bg: var(--note-lime-bg); --note-border: var(--note-lime-border); --note-fg: var(--note-lime-fg); }
.note-color-emerald { --note-bg: var(--note-emerald-bg); --note-border: var(--note-emerald-border); --note-fg: var(--note-emerald-fg); }
.note-color-teal { --note-bg: var(--note-teal-bg); --note-border: var(--note-teal-border); --note-fg: var(--note-teal-fg); }
.note-color-sky { --note-bg: var(--note-sky-bg); --note-border: var(--note-sky-border); --note-fg: var(--note-sky-fg); }
.note-color-indigo { --note-bg: var(--note-indigo-bg); --note-border: var(--note-indigo-border); --note-fg: var(--note-indigo-fg); }
.note-color-violet { --note-bg: var(--note-violet-bg); --note-border: var(--note-violet-border); --note-fg: var(--note-violet-fg); }
.note-color-slate { --note-bg: var(--note-slate-bg); --note-border: var(--note-slate-border); --note-fg: var(--note-slate-fg); }

.note-swatch {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    border: 2px solid var(--note-border, var(--clr-border));
    background: var(--note-bg, var(--clr-surface));
    cursor: pointer;
    padding: 0;
}

.note-swatch.is-selected {
    outline: 2px solid var(--note-fg, var(--clr-accent-mid));
    outline-offset: 2px;
}

.note-color-dot {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: var(--note-fg, var(--clr-text-muted));
    flex-shrink: 0;
}

.note-stripe {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
    background: var(--note-fg, transparent);
}