/*
 *  Copyright 2025 David de Prez
 *
 *    Licensed under the Apache License, Version 2.0 (the "License");
 *    you may not use this file except in compliance with the License.
 *    You may obtain a copy of the License at
 *
 *        http://www.apache.org/licenses/LICENSE-2.0
 *
 *    Unless required by applicable law or agreed to in writing, software
 *    distributed under the License is distributed on an "AS IS" BASIS,
 *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *    See the License for the specific language governing permissions and
 *    limitations under the License.
 */

/*
primary:        #085307
secondary:      #520753 (complementary color)
Monochromatic:  #0c7d0b (100), #10a80e (200), #14d212 (300), #18fd15 (400), #042803 (500)

shades:         #085307, #0d470a, #103c0b, #10310b, #10260a, #0e1c07, #081204, #000000
tints:          #085307, #346a2c, #56824c, #779a6e, #98b390, #baccb4, #dce5d9, #ffffff
tones:          #085307, #235a1c, #36602d, #46673e, #556d4e, #63745f, #727a6f, #808080
*/

:root[theme='scouting'], :host([theme='scouting']) {
    --surface-color: #f3f3f3;
    --md-sys-color-background: var(--surface-color);

    --primary-color: #085307;
    --md-sys-color-primary: var(--primary-color);
    --primary-color-100: #0c7d0b;
    --primary-color-200: #10a80e;
    --primary-color-300: #14d212;
    --primary-color-400: #18fd15;
    --primary-color-500: #042803;

    --primary-color-tint-1: #085307;
    --primary-color-tint-2: #346a2c;
    --primary-color-tint-3: #56824c;
    --primary-color-tint-4: #779a6e;
    --primary-color-tint-5: #98b390;
    --primary-color-tint-6: #baccb4;
    --primary-color-tint-7: #dce5d9;
    --primary-color-tint-8: #ffffff;

    --primary-color-tone-1: #085307;
    --primary-color-tone-2: #235a1c;
    --primary-color-tone-3: #36602d;
    --primary-color-tone-4: #46673e;
    --primary-color-tone-5: #556d4e;
    --primary-color-tone-6: #63745f;
    --primary-color-tone-7: #727a6f;
    --primary-color-tone-8: #808080;

    --primary-color-raised-hover-solid: var(--primary-color-tint-5);
    --secondary-color-raised-hover-solid: var(--secondary-color-tint-5);
    --hover-color: color-mix(in srgb, var(--primary-color-tone-7) 20%, transparent);

    --secondary-color: #520753;
    --md-sys-color-secondary: var(--secondary-color);

    --secondary-color-shade-1: #520753;
    --secondary-color-shade-2: #470b47;
    --secondary-color-shade-3: #3c0d3c;
    --secondary-color-shade-4: #310e31;
    --secondary-color-shade-5: #270d26;
    --secondary-color-shade-6: #1d0a1c;
    --secondary-color-shade-7: #120511;
    --secondary-color-shade-8: #000000;

    --secondary-color-tint-1: #520753;
    --secondary-color-tint-2: #6b2f6a;
    --secondary-color-tint-3: #835081;
    --secondary-color-tint-4: #9c7199;
    --secondary-color-tint-5: #b593b2;
    --secondary-color-tint-6: #cdb6cb;
    --secondary-color-tint-7: #e6dae5;
    --secondary-color-tint-8: #ffffff;

    --md-sys-color-secondary-container: var(--secondary-color);
    --md-sys-color-on-secondary-container: var(--surface-color);
    --secondary-color-hover-solid: var(--secondary-color-shade-5);

    --border-color-default: #cdcdcd;
    --font-color-disabled: var(--primary-color-tone-7);
    --background-color-disabled: color-mix(in srgb, var(--primary-color-tone-8) 20%, transparent);

    --background-color-disabled-none-transparent: color-mix(in srgb, var(--primary-color-tone-8) 20%, var(--surface-color));
}

.very.important.testing.node {
    color: red !important;
}

.very.important.testing.node:hover {
    color: red !important;
}

.input-field.error .supporting-text {
    color: #FFF;
}

.btn.tonal:hover, .tonal.btn-small:hover, .tonal.btn-large:hover, .btn.elevated:hover, .elevated.btn-small:hover, .elevated.btn-large:hover {
    background-color: var(--secondary-color-hover-solid);
}

.btn.outlined.disabled {
    border: 1px solid var(--background-color-disabled);
}