/* Colour tags: a small highlighter-style pill that says what kind of thing it labels.
   Every tag keeps its text inside, so the colour is a shortcut, never the only cue.

   Each colour class names a vivid shade per theme, --tag-light and --tag-dark, picked
   so all the site/specialty colours stay far apart. The pill mixes that shade into the
   page (--tag-paper) at --tag-strength, under the page's ordinary ink, so the text
   keeps at least 6:1 contrast (WCAG AA) in both themes. Raise --tag-strength for
   bolder tags, lower it for paler ones. */

:root {
    --tag-strength: 80%;
}

:root:not([data-theme=dark]),
[data-theme=light] {
    --tag-paper: #fff;
    --tag-ink: #181c25;
}

@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --tag-paper: #13171f;
        --tag-ink: #f0f1f3;
    }

    :root:not([data-theme]) .tag {
        --tag-base: var(--tag-dark);
    }
}

[data-theme=dark] {
    --tag-paper: #13171f;
    --tag-ink: #f0f1f3;
}

[data-theme=dark] .tag {
    --tag-base: var(--tag-dark);
}

.tag {
    --tag-light: var(--pico-color-zinc-100);
    --tag-dark: var(--pico-color-zinc-750);
    --tag-base: var(--tag-light);
    --pico-color: var(--tag-ink);
    --pico-underline: currentColor;
    display: inline-block;
    padding: 0 0.4em;
    border-radius: var(--pico-border-radius);
    background-color: color-mix(in oklch, var(--tag-base) var(--tag-strength), var(--tag-paper));
    color: var(--tag-ink);
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: baseline;
}

a.tag:hover {
    --pico-color: var(--tag-ink);
    text-decoration: underline;
}

/* Sites and rotation specialties: core.models.TagColor. */
.tag-red { --tag-light: var(--pico-color-red-350); --tag-dark: var(--pico-color-red-600); }
.tag-pink { --tag-light: var(--pico-color-pink-300); --tag-dark: var(--pico-color-pink-600); }
.tag-magenta { --tag-light: var(--pico-color-fuchsia-400); --tag-dark: var(--pico-color-fuchsia-600); }
.tag-lilac { --tag-light: var(--pico-color-purple-250); --tag-dark: var(--pico-color-purple-600); }
.tag-indigo { --tag-light: var(--pico-color-indigo-350); --tag-dark: var(--pico-color-indigo-650); }
.tag-periwinkle { --tag-light: var(--pico-color-blue-150); --tag-dark: var(--pico-color-blue-550); }
.tag-blue { --tag-light: var(--pico-color-azure-350); --tag-dark: var(--pico-color-azure-600); }
.tag-teal { --tag-light: var(--pico-color-cyan-150); --tag-dark: var(--pico-color-cyan-600); }
.tag-mint { --tag-light: var(--pico-color-jade-150); --tag-dark: var(--pico-color-jade-600); }
.tag-green { --tag-light: var(--pico-color-green-300); --tag-dark: var(--pico-color-green-700); }
.tag-lime { --tag-light: var(--pico-color-lime-150); --tag-dark: var(--pico-color-lime-600); }
.tag-yellow { --tag-light: var(--pico-color-yellow-100); --tag-dark: var(--pico-color-yellow-700); }
.tag-gold { --tag-light: var(--pico-color-amber-250); --tag-dark: var(--pico-color-amber-600); }
/* No light Pico shade is both brown and readable under dark ink, so light is a tan. */
.tag-brown {
    --tag-light: color-mix(in oklch, var(--pico-color-pumpkin-600) 65%, #fff);
    --tag-dark: var(--pico-color-pumpkin-700);
}
.tag-peach { --tag-light: var(--pico-color-orange-200); --tag-dark: var(--pico-color-orange-700); }
.tag-neutral { --tag-light: var(--pico-color-zinc-100); --tag-dark: var(--pico-color-zinc-750); }

/* CBD stages: the blues of the Royal College's CBD competence continuum diagram.
   Pale to deep as the resident progresses; on a dark page, from deep to bright. */
.tag-stage-ttd { --tag-light: #cdebf7; --tag-dark: #0b3550; }
.tag-stage-f { --tag-light: #85c7e5; --tag-dark: #08496c; }
.tag-stage-c { --tag-light: #56b1da; --tag-dark: #1c5c7f; }
.tag-stage-ttp { --tag-light: #3f98c2; --tag-dark: #357293; }

/* Residency years in purple and fellowship years in green, deeper the more senior
   (on a dark page, brighter, since darker would fade into the background). */
.tag-pgy-1 { --tag-light: var(--pico-color-purple-100); --tag-dark: var(--pico-color-purple-850); }
.tag-pgy-2 { --tag-light: var(--pico-color-purple-200); --tag-dark: var(--pico-color-purple-800); }
.tag-pgy-3 { --tag-light: var(--pico-color-purple-300); --tag-dark: var(--pico-color-purple-700); }
.tag-pgy-4 { --tag-light: var(--pico-color-purple-400); --tag-dark: var(--pico-color-purple-650); }
.tag-pgy-5 { --tag-light: var(--pico-color-purple-450); --tag-dark: var(--pico-color-purple-600); }
.tag-pgy-101 { --tag-light: var(--pico-color-green-150); --tag-dark: var(--pico-color-green-850); }
.tag-pgy-102 { --tag-light: var(--pico-color-green-250); --tag-dark: var(--pico-color-green-700); }
.tag-pgy-103 { --tag-light: var(--pico-color-green-400); --tag-dark: var(--pico-color-green-600); }

/* The colour picker on the site and specialty forms: radio buttons shown as tags. */
.tag-color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--pico-spacing);
}

.tag-color-picker label {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
}

.tag-color-picker input[type="radio"] {
    margin: 0;
}