:root {
    color-scheme: dark light;

    --dark-primary:     hsl(0 0% 90%);
    --dark-primary-bg:  hsl(223 20% 7%);
    --dark-cta:         hsl(217 91% 60%);
    --dark-blue:        hsl(222 100% 68%);
    --dark-green:       hsl(160 84% 39%);
    --dark-red:         hsl(0 100% 40%);
    --dark-orange:      hsl(38 92% 50%);

    --light-primary:    hsl(225 15% 15%);
    --light-primary-bg: hsl(0 0% 100%);
    --light-cta:        hsl(217 91% 60%);
    --light-blue:       hsl(222 100% 68%);
    --light-green:      hsl(160 84% 35%);
    --light-red:        hsl(350 100% 45%);
    --light-orange:     hsl(38 92% 48%);

    --color-disabled:   hsl(0 0% 60%);
}
:root {
    --color-primary:    var(--dark-primary);
    --color-primary-bg: var(--dark-primary-bg);
    --color-cta:        var(--dark-cta);
    --color-blue:       var(--dark-blue);
    --color-green:      var(--dark-green);
    --color-red:        var(--dark-red);
    --color-orange:     var(--dark-orange);
}
@media (prefers-color-scheme: light) {
    :root {
        --color-primary:    var(--light-primary);
        --color-primary-bg: var(--light-primary-bg);
        --color-cta:        var(--light-cta);
        --color-blue:       var(--light-blue);
        --color-green:      var(--light-green);
        --color-red:        var(--light-red);
        --color-orange:     var(--light-orange);
    }
}
body {
    &[data-theme="dark"] {
        --color-primary:    var(--dark-primary);
        --color-primary-bg: var(--dark-primary-bg);
        --color-cta:        var(--dark-cta);
        --color-blue:       var(--dark-blue);
        --color-green:      var(--dark-green);
        --color-red:        var(--dark-red);
        --color-orange:     var(--dark-orange);
    }
    &[data-theme="light"] {
        --color-primary:    var(--light-primary);
        --color-primary-bg: var(--light-primary-bg);
        --color-cta:        var(--light-cta);
        --color-blue:       var(--light-blue);
        --color-green:      var(--light-green);
        --color-red:        var(--light-red);
        --color-orange:     var(--light-orange);
    }
}
.card {
    background-color: color-mix(in hsl, var(--color-primary-bg), var(--color-primary) 7%);
    border: 1px solid hsl(from var(--color-primary) h s l / .25);
    padding: 1em;
    box-shadow: 1px 1px 3px hsl(from var(--color-primary) h s l / .2);
}
/*.badge {
    padding: .5em 1em;
    border-radius: .5em;
    font-size: .75rem;
    font-weight: bold;
    width: fit-content;
    background-color: hsl(from currentColor h s l / .15);
    &.blue { color: hsl(from var(--color-blue) h s calc(l + 5)); }
    &.grey { color: hsl(from var(--color-disabled) h s calc(l + 5)); }
    &.green { color: hsl(from var(--color-green) h s calc(l + 5)); }
    &.orange { color: hsl(from var(--color-orange) h s calc(l + 5)); }
    &.red { color: hsl(from var(--color-red) h s calc(l + 5)); }
}*/

body {
    margin: 0;
    background: var(--color-primary-bg);
    color: var(--color-primary);
    font-family: Arial, Helvetica, sans-serif;
}

button {
    background-color: var(--color-cta);
    border: 1px solid hsl(from var(--color-cta) h s l / .25);
    color: #fff;
    font-size: 1em;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background-color: color-mix(in hsl, var(--color-primary-bg), var(--color-primary) 7%);
    border-bottom: 1px solid hsl(from var(--color-primary) h s l / .25);
    .title { line-height: 0; }
    .user {
        font-size: 1.5em;
        font-weight: bold;
        .connect {
            background-color: transparent;
            border: none;
            img {
                height: 32px;
                @media (prefers-color-scheme: dark) {
                    filter: invert(1);
                }
            }
        }
        .initial {
            background: transparent;
            border: none;
            color: var(--color-primary);
            text-transform: uppercase;
            font-weight: bold;
        }
        .menu {
            z-index: 1;
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            height: 100vh;
            text-align: center;
            padding: 0 .5em;
            background-color: color-mix(in hsl, var(--color-primary-bg) 90%, var(--color-primary) 10%);
            border-left: 1px solid hsl(from var(--color-primary) h s l / .25);
            max-width: 60vw;
            button {
                margin-top: 1em;
                width: 100%;
            }
            &.show { display: block; }
            & > *:first-of-type { margin-top: 1em; }
        }
        &:not(button) { text-transform: uppercase; }
    }
}
main {
    padding: 0 .5em;
    h2 {
        width: 100%;
        text-align: center;
    }
    .alerts {
        .alert {
            font-size: 1.25em;
            margin: 1em 0;
            padding: 1em;
            background-color: var(--color-red);
            color: #fff;
            font-weight: bold;
            text-align: center;
        }
        &:empty { height: 1em; }
    }
    .events {
        display: flex;
        flex-direction: column;
        gap: 1em;
        margin-bottom: 2em;
        .event {
            .calendar {
                float: left;
                width: 6ch;
                border: 1px solid hsl(from var(--color-primary) h s l / .25);
                background-color: #fff;
                text-align: center;
                margin-right: 1em;
                .month {
                    background: var(--color-red);
                    color: #fff;
                    font-size: .75em;
                    font-weight: bold;
                    text-transform: uppercase;
                    padding: 4px 0;
                    letter-spacing: 1px;
                }
                .day {
                    color: #000;
                    font-size: 1.5em;
                    font-weight: bold;
                    line-height: 1.75;
                }
            }
            .content {
                flex: 1;
                color: var(--color-primary);
                .title {
                    font-size: 1.25em;
                    font-weight: bold;
                }
                .date {
                    margin-top: .25em;
                    position: relative;
                }
                .description {
                    margin-top: .5em;
                    line-height: 1.4;
                }
            }
        }
        &:empty {
            &::after {
                content: "rien de prévu :)";
                margin: 2em auto;
            }
        }
    }
    .infos {
        border-bottom: 1px solid hsl(from var(--color-primary) h s l / .25);
        font-size: 1.25em;
        text-wrap: pretty;
        margin-bottom: 1em;
        img { width: 100%; }
        span { font-weight: bold; }
        &.hide {
            font-size: 0;
            img { display: none; }
            &::after {
                font-size: 1rem;
                content: 'Afficher les infos du club';
            }
        }
    }
}
dialog {
    &.login {
        margin-top: 20vh;
        fieldset {
            &:not(&:first-of-type) { margin-top: 1em; }
        }
        input {
            width: 60vw;
            font-size: 1.25em;
        }
        .error { border: 1px solid var(--color-red); }
        button {
            margin-top: 1em;
            &.close { background-color: #888; }
            &.connect { float: right; }
        }
        &::backdrop { background-color: hsl(0 0% 0% / .6); }
    }
}