/* =========================================================================
   Skins
   -------------------------------------------------------------------------
   Four complete looks over one set of markup, so the committee can compare
   real pages rather than mockups. A skin is chosen with the picker, kept in
   localStorage, and can be shared with ?skin=<name> on any URL.

   Every palette below was checked against WCAG AA before it was written:
   `python tools/contrast.py` prints the pairs. Keep that passing.

   This whole file, and the picker, are meant to come out once a look is
   chosen. Turn the picker off with the "Show the design picker" setting, then
   fold the winning skin's values into site.css and delete this.
   ========================================================================= */

/* ================================================================ garage == */

/*
 * Shop manual. White and steel, technical labels, hard square corners, thin
 * grey rules instead of heavy black ones. Numbers set in a mono face the way a
 * spec sheet does.
 */
:root[data-skin="garage"] {
    --ground: #b9bcc0;
    --paper: #ffffff;
    --cream: #eceef0;
    --surface: #ffffff;
    --sunk: #dfe2e5;

    --ink: #15181c;
    --ink-soft: #343b43;
    --ink-muted: #4b5158;
    --rule: #cdd2d7;
    --rule-strong: #9aa1a9;

    --green: #d7dade;
    --lime: #eceef0;
    --green-ink: #1f6f35;
    --green-deep: #145127;
    --green-wash: #e9eef0;
    --red: #b8121f;
    --red-bright: #b8121f;
    --red-wash: #f7e9ea;
    --block: #15181c;
    --on-block: #c8ccd1;
    --block-accent: #c8ccd1;
    --on-brand: #15181c;

    --radius: 0px;
    --radius-lg: 0px;
}

:root[data-skin="garage"] .page {
    border-width: 1px;
    box-shadow: none;
}

:root[data-skin="garage"] .section--cream > .wrap,
:root[data-skin="garage"] .hero > .wrap,
:root[data-skin="garage"] .page-head > .wrap,
:root[data-skin="garage"] .band,
:root[data-skin="garage"] .banner,
:root[data-skin="garage"] .card-stop,
:root[data-skin="garage"] .person,
:root[data-skin="garage"] .album-card,
:root[data-skin="garage"] .poster,
:root[data-skin="garage"] .gallery-grid button,
:root[data-skin="garage"] .wall,
:root[data-skin="garage"] .merch img,
:root[data-skin="garage"] .figure-bleed,
:root[data-skin="garage"] #route-map {
    border-width: 1px;
    box-shadow: none;
}

:root[data-skin="garage"] .btn,
:root[data-skin="garage"] .theme-toggle,
:root[data-skin="garage"] .nav-toggle,
:root[data-skin="garage"] .header-social,
:root[data-skin="garage"] input,
:root[data-skin="garage"] select,
:root[data-skin="garage"] textarea {
    border-width: 1px;
}

/* The ride button loses its green fill and becomes a steel plate. */
:root[data-skin="garage"] .btn--go {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

:root[data-skin="garage"] .btn--go:hover {
    background: var(--green-ink);
    border-color: var(--green-ink);
    color: #fff;
}

:root[data-skin="garage"] .hero__stamp {
    background: var(--ink);
    color: var(--paper);
    letter-spacing: 0.2em;
}

:root[data-skin="garage"] .hero__art {
    background: var(--cream);
}

:root[data-skin="garage"] .banner {
    background: var(--cream);
}

/* Spec-sheet numerals. */
:root[data-skin="garage"] .numcards__num,
:root[data-skin="garage"] .reveal span,
:root[data-skin="garage"] .chart__value,
:root[data-skin="garage"] .chart__year,
:root[data-skin="garage"] .timeline__time,
:root[data-skin="garage"] .event-row__day {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-weight: 700;
    letter-spacing: -0.03em;
}

:root[data-skin="garage"] .section__head h2 {
    border-top-width: 2px;
}

:root[data-skin="garage"] .details,
:root[data-skin="garage"] .timeline,
:root[data-skin="garage"] .ways,
:root[data-skin="garage"] .checklist,
:root[data-skin="garage"] .faq,
:root[data-skin="garage"] .post-list,
:root[data-skin="garage"] .event-list,
:root[data-skin="garage"] .prose .fact-list {
    border-top-width: 2px;
}

:root[data-skin="garage"] .way::before {
    color: var(--ink-muted);
}

/* ============================================================== heritage == */

/*
 * The long-running charity. Ivory, deep forest green, a serif for display, thin
 * rules and more air. Calmer than the poster: this is the look for people who
 * find the poster shouty.
 */
:root[data-skin="heritage"] {
    --ground: #cfc3a8;
    --paper: #fdfbf5;
    --cream: #f2ebd9;
    --surface: #fdfbf5;
    --sunk: #e8dfc7;

    --ink: #221f1a;
    --ink-soft: #3f3a30;
    --ink-muted: #57503f;
    --rule: #ddd2b6;
    --rule-strong: #b8a982;

    --green: #1f5c36;
    --lime: #2f7d48;
    --green-ink: #1f5c36;
    --green-deep: #143d24;
    --green-wash: #eaf0e9;
    --red: #8c2b1e;
    --red-bright: #8c2b1e;
    --red-wash: #f7ebe8;
    --block: #221f1a;
    --on-block: #ded6c4;
    --block-accent: #e0b64a;
    /* Heritage fills are dark green, so type on them is ivory, not ink. */
    --on-brand: #fdfbf5;

    --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
    --radius: 2px;
    --radius-lg: 2px;
}

:root[data-skin="heritage"] h1,
:root[data-skin="heritage"] h2,
:root[data-skin="heritage"] h3,
:root[data-skin="heritage"] .display,
:root[data-skin="heritage"] .brand__name,
:root[data-skin="heritage"] .mobile-nav__list a,
:root[data-skin="heritage"] .band__heading,
:root[data-skin="heritage"] .site-footer__mission,
:root[data-skin="heritage"] .way__title,
:root[data-skin="heritage"] .card-stop h3 {
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.015em;
    line-height: 1.08;
}

/* A serif at display size needs less shouting and more room. */
:root[data-skin="heritage"] {
    --step-3: clamp(1.7rem, 1.4rem + 1.5vw, 2.5rem);
    --step-4: clamp(2.1rem, 1.6rem + 2.6vw, 3.4rem);
    --step-5: clamp(2.3rem, 1.7rem + 3.4vw, 3.8rem);
    --section-y: clamp(2.75rem, 6vw, 5rem);
}

:root[data-skin="heritage"] .page {
    border-width: 1px;
    box-shadow: 0 2px 24px rgba(34, 31, 26, 0.12);
}

:root[data-skin="heritage"] .section--cream > .wrap,
:root[data-skin="heritage"] .hero > .wrap,
:root[data-skin="heritage"] .page-head > .wrap,
:root[data-skin="heritage"] .band,
:root[data-skin="heritage"] .banner,
:root[data-skin="heritage"] .card-stop,
:root[data-skin="heritage"] .person,
:root[data-skin="heritage"] .album-card,
:root[data-skin="heritage"] .poster,
:root[data-skin="heritage"] .gallery-grid button,
:root[data-skin="heritage"] .wall,
:root[data-skin="heritage"] .merch img,
:root[data-skin="heritage"] .figure-bleed,
:root[data-skin="heritage"] #route-map,
:root[data-skin="heritage"] .btn,
:root[data-skin="heritage"] .theme-toggle,
:root[data-skin="heritage"] .nav-toggle,
:root[data-skin="heritage"] .header-social,
:root[data-skin="heritage"] input,
:root[data-skin="heritage"] select,
:root[data-skin="heritage"] textarea {
    border-width: 1px;
}

:root[data-skin="heritage"] .poster {
    box-shadow: none;
}

:root[data-skin="heritage"] .card-stop,
:root[data-skin="heritage"] .banner {
    box-shadow: none;
}

:root[data-skin="heritage"] .btn--go {
    background: var(--green);
    border-color: var(--green);
    color: var(--on-brand);
}

:root[data-skin="heritage"] .btn--go:hover {
    background: var(--green-deep);
    border-color: var(--green-deep);
    color: var(--on-brand);
}

:root[data-skin="heritage"] .hero__stamp {
    background: transparent;
    border: 1px solid var(--green);
    color: var(--green-ink);
}

:root[data-skin="heritage"] .hero__art {
    background: var(--cream);
    border-color: var(--rule-strong);
}

:root[data-skin="heritage"] .section__head h2 {
    border-top: 1px solid var(--rule-strong);
    padding-top: 0.9rem;
}

:root[data-skin="heritage"] .numcards li,
:root[data-skin="heritage"] .reveal span {
    border-width: 1px;
    box-shadow: none;
}

:root[data-skin="heritage"] .way::before {
    color: var(--green-ink);
}

/* ================================================================= clean == */

/*
 * The modern nonprofit. White, one grey, one green, generous space, soft
 * corners, no display face at all. The safe option.
 */
:root[data-skin="clean"] {
    --ground: #eef1f4;
    --paper: #ffffff;
    --cream: #f5f7f9;
    --surface: #ffffff;
    --sunk: #e7ebef;

    --ink: #14181d;
    --ink-soft: #333c46;
    --ink-muted: #525c68;
    --rule: #dde3e9;
    --rule-strong: #b9c2cc;

    --green: #17683a;
    --lime: #1f8049;
    --green-ink: #17683a;
    --green-deep: #0f4a29;
    --green-wash: #e9f2ec;
    --red: #b31b32;
    --red-bright: #b31b32;
    --red-wash: #fbecee;
    --block: #14181d;
    --on-block: #c9cfd6;
    --block-accent: #8ad884;
    --on-brand: #ffffff;

    --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --radius: 8px;
    --radius-lg: 12px;
    --section-y: clamp(2.75rem, 6vw, 5rem);
}

:root[data-skin="clean"] h1,
:root[data-skin="clean"] h2,
:root[data-skin="clean"] h3,
:root[data-skin="clean"] .display,
:root[data-skin="clean"] .brand__name,
:root[data-skin="clean"] .mobile-nav__list a,
:root[data-skin="clean"] .band__heading,
:root[data-skin="clean"] .site-footer__mission,
:root[data-skin="clean"] .way__title,
:root[data-skin="clean"] .card-stop h3,
:root[data-skin="clean"] .numcards__num,
:root[data-skin="clean"] .reveal span,
:root[data-skin="clean"] .timeline__time,
:root[data-skin="clean"] .chart__year,
:root[data-skin="clean"] .chart__value,
:root[data-skin="clean"] .event-row__day,
:root[data-skin="clean"] .way::before {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: none;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

:root[data-skin="clean"] .page {
    border: 0;
    box-shadow: 0 1px 2px rgba(20, 24, 29, 0.05), 0 12px 40px rgba(20, 24, 29, 0.08);
    border-radius: 16px;
    overflow: hidden;
}

:root[data-skin="clean"] .section--cream > .wrap,
:root[data-skin="clean"] .hero > .wrap,
:root[data-skin="clean"] .page-head > .wrap,
:root[data-skin="clean"] .band,
:root[data-skin="clean"] .banner,
:root[data-skin="clean"] .card-stop,
:root[data-skin="clean"] .person,
:root[data-skin="clean"] .album-card,
:root[data-skin="clean"] .poster,
:root[data-skin="clean"] .gallery-grid button,
:root[data-skin="clean"] .wall,
:root[data-skin="clean"] .merch img,
:root[data-skin="clean"] .figure-bleed,
:root[data-skin="clean"] #route-map,
:root[data-skin="clean"] .numcards li,
:root[data-skin="clean"] .reveal span {
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

:root[data-skin="clean"] .btn,
:root[data-skin="clean"] .theme-toggle,
:root[data-skin="clean"] .nav-toggle,
:root[data-skin="clean"] .header-social {
    border-width: 1px;
    border-radius: var(--radius);
}

:root[data-skin="clean"] .btn {
    border-color: transparent;
}

:root[data-skin="clean"] .btn--outline {
    border-color: var(--rule-strong);
}

:root[data-skin="clean"] .btn--go {
    background: var(--green);
    border-color: var(--green);
    color: var(--on-brand);
}

:root[data-skin="clean"] .btn--go:hover {
    background: var(--green-deep);
    border-color: var(--green-deep);
}

:root[data-skin="clean"] .site-header {
    border-bottom: 1px solid var(--rule);
}

:root[data-skin="clean"] .section__head h2 {
    border-top: 0;
    padding-top: 0;
}

:root[data-skin="clean"] .hero__stamp {
    background: var(--green-wash);
    border: 1px solid transparent;
    color: var(--green-ink);
    border-radius: 999px;
}

:root[data-skin="clean"] .hero__art {
    background: var(--green-wash);
    border-color: transparent;
}

:root[data-skin="clean"] .banner {
    background: var(--green-wash);
    border-color: var(--rule);
}

:root[data-skin="clean"] .banner,
:root[data-skin="clean"] .banner h2,
:root[data-skin="clean"] .banner p,
:root[data-skin="clean"] .banner p a {
    color: var(--ink);
}

:root[data-skin="clean"] .banner .btn--outline {
    border-color: var(--rule-strong);
    color: var(--ink);
}

:root[data-skin="clean"] .banner .btn--outline:hover {
    background: var(--ink);
    color: var(--paper);
}

:root[data-skin="clean"] .details,
:root[data-skin="clean"] .timeline,
:root[data-skin="clean"] .ways,
:root[data-skin="clean"] .checklist,
:root[data-skin="clean"] .faq,
:root[data-skin="clean"] .post-list,
:root[data-skin="clean"] .event-list,
:root[data-skin="clean"] .prose .fact-list,
:root[data-skin="clean"] .price-table {
    border-top: 1px solid var(--rule);
}

:root[data-skin="clean"] .numcards li,
:root[data-skin="clean"] .reveal span {
    background: var(--ink);
}

/* ============================================================ the picker == */

.skinbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem var(--gutter);
    background: repeating-linear-gradient(
        45deg,
        var(--sunk) 0 10px,
        color-mix(in srgb, var(--sunk) 70%, var(--paper)) 10px 20px
    );
    border-bottom: 2px solid var(--ink);
    font-size: var(--step--1);
}

.skinbar__label {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

.skinbar__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.skinbar__options li {
    margin: 0;
}

.skinbar a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0.3rem 0.85rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.skinbar a:hover {
    background: var(--cream);
    color: var(--ink);
}

.skinbar a[aria-current="true"] {
    background: var(--ink);
    color: var(--paper);
}

.skinbar__note {
    margin: 0;
    color: var(--ink-muted);
    flex-basis: 100%;
}

@media (max-width: 560px) {
    .skinbar {
        gap: 0.4rem;
    }

    .skinbar__label {
        flex-basis: 100%;
    }
}