/* ======================================================================== */
/*  Design tokens for the Montreal Session Tunebook                         */
/* ======================================================================== */

:root {
    /* color palette: deep teal / copper, an evolution of the live site's
       black banner + amber accent tuned for higher-contrast accessibility.
       This is theme "A", the default; see the [data-theme] overrides below
       for the alternate palettes B/C/D. */
    --color-one: #0f2a2e;
    --color-two: #1f6f8b;
    --color-three: #e08030;
    --color-four: #f0f4f4;
    --color-five: #dce3e8;

    --text-color: #12181a;
    --muted-text-color: #455055;
    --link-hover-color: #a8540f;
    --hover-button-background: #f0a050;

    --primary-color: var(--color-one);
    --horizontal-rule-color: var(--primary-color);

    --nice-border: 1px solid var(--color-five);
    --nice-border-shadow:
        0 4px 8px rgba(0, 0, 0, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.08);
    --nice-border-radius: 8px;
    --nice-border-padding: 5px 8px 5px 8px;

    --emphasis-color: var(--color-three);

    --dark-background: var(--color-two);
    --light-background: var(--color-four);
    --white-background: White;

    --link-color: var(--color-one);

    --font-main: Arial,  sans-serif;
    --font-mono: 'SF Mono', Menlo, Consolas, monospace;

    --panel-inset: 20px;
    --panel-margin: 30px;

    /* buttons */
    --button-background: var(--color-three);
    --button-text-color: var(--color-one);
    --disabled-button-background: var(--color-five);
    --disabled-button-text-color: var(--muted-text-color);

    /* nav */
    --nav-background: var(--color-one);
    --nav-text-color: var(--color-four);
    --nav-active-background: var(--color-three);
    --nav-active-text-color: var(--color-one);
    --nav-hover-background: var(--color-two);

    /* error/warning banners */
    --error-background: #f6dede;
    --error-text-color: #7a1f1f;
    --warning-background: #f8ecd0;
    --warning-text-color: #6b4d10;
}

:root[data-theme="B"] {
    /* color palette: ink / gold, max-contrast formal/classic look */
    --color-one: #000000;
    --color-two: #4a4a4a;
    --color-three: #b8860b;
    --color-four: #f7f5f0;
    --color-five: #e5e0d5;

    --text-color: #0d0d0d;
    --muted-text-color: #3d3d3d;
    --link-hover-color: #8a6200;
    --hover-button-background: #d4a017;
}

:root[data-theme="C"] {
    /* color palette: forest / sky, cool and calm */
    --color-one: #16332a;
    --color-two: #1f6f8b;
    --color-three: #1f6f8b;
    --color-four: #eef3ee;
    --color-five: #d9e3da;

    --text-color: #111a14;
    --muted-text-color: #3f4a42;
    --link-hover-color: #1f6f8b;
    --hover-button-background: #4390ab;
    --button-text-color: #ffffff;
    --nav-active-text-color: #ffffff;
}

:root[data-theme="D"] {
    /* color palette: plum / amber, warm and distinctive */
    --color-one: #3a1730;
    --color-two: #6b3a5c;
    --color-three: #c97a1a;
    --color-four: #f5f0f2;
    --color-five: #e5d9e0;

    --text-color: #1a1015;
    --muted-text-color: #4a3d43;
    --link-hover-color: #9c5c14;
    --hover-button-background: #e0954a;
}

:root[data-theme="E"] {
    /* color palette: slate blue, mid-tone banner (not dark) with copper accent */
    --color-one: #7b8fa8;
    --color-two: #a8b7c8;
    --color-three: #b84e24;
    --color-four: #f4f6f9;
    --color-five: #dde3ea;

    --text-color: #1a1f26;
    --muted-text-color: #4d5563;
    --link-hover-color: #b84e24;
    --hover-button-background: #963f1c;
    --link-color: #3d4f66;
    --primary-color: #3d4f66;
    --button-text-color: #ffffff;
    --nav-text-color: #12161c;
    --nav-active-text-color: #ffffff;
}

:root[data-theme="F"] {
    /* color palette: moss green, mid-tone earthy banner with brown accent */
    --color-one: #7d9469;
    --color-two: #aabb9c;
    --color-three: #8a5a2e;
    --color-four: #f5f7f0;
    --color-five: #dde5d5;

    --text-color: #1c211a;
    --muted-text-color: #4d5548;
    --link-hover-color: #8a5a2e;
    --hover-button-background: #6e4622;
    --link-color: #3f5031;
    --primary-color: #3f5031;
    --button-text-color: #ffffff;
    --nav-text-color: #15190f;
    --nav-active-text-color: #ffffff;
}

:root[data-theme="G"] {
    /* color palette: dusty rose, mid-tone warm banner with slate-blue accent */
    --color-one: #b97185;
    --color-two: #d6a8b5;
    --color-three: #4a5a6b;
    --color-four: #faf5f6;
    --color-five: #ecdde1;

    --text-color: #241a1c;
    --muted-text-color: #5a4a4d;
    --link-hover-color: #4a5a6b;
    --hover-button-background: #374553;
    --link-color: #7a3d4d;
    --primary-color: #7a3d4d;
    --button-text-color: #ffffff;
    --nav-text-color: #1f1315;
    --nav-active-text-color: #ffffff;
}

:root[data-theme="J"] {
    /* color palette: cerulean / honey, dark teal-navy banner with golden accent */
    --color-one: #00303f;
    --color-two: #7a9d96;
    --color-three: #dcae1d;
    --color-four: #e8f4f0;
    --color-five: #cae4db;

    --text-color: #0a1f26;
    --muted-text-color: #3d5a55;
    --link-hover-color: #8a6209;
    --hover-button-background: #f0a050;
    --nav-hover-background: #3d6560;
}

:root[data-theme="I"] {
    /* color palette: barely green, mid-tone earthy banner with khaki accent */
    --color-one: #96867f;
    --color-two: #acb7ae;
    --color-three: #c2b490;
    --color-four: #e4decd;
    --color-five: #dccfc0;

    --text-color: #1a1410;
    --muted-text-color: #5c4c48;
    --link-hover-color: #6b4a20;
    --hover-button-background: #a89570;
    --link-color: #1a1410;
    --primary-color: #1a1410;
    --button-text-color: #1a1410;
    --nav-text-color: #1a1410;
    --nav-active-text-color: #1a1410;
}

:root[data-theme="H"] {
    /* color palette: warm sand, light/mid high-key banner with deep green accent */
    --color-one: #c9a15a;
    --color-two: #a8813f;
    --color-three: #2f4b3c;
    --color-four: #fbf8f2;
    --color-five: #ece2cc;

    --text-color: #2a2318;
    --muted-text-color: #5e5340;
    --link-hover-color: #2f4b3c;
    --hover-button-background: #213627;
    --link-color: #6b4d1f;
    --primary-color: #6b4d1f;
    --button-text-color: #ffffff;
    --nav-text-color: #241c0d;
    --nav-active-text-color: #ffffff;
}