/* ------------------------------
Theme
------------------------------ */
@import url(custom-theme/tokens.css);
@import url(custom-theme/theme.css);

/* common */
:root {
    --cu-green-color-not-activated: var(--md-custom-color-Custom-Color-3-container-dark);
    --cu-yellow-color-not-activated: var(--md-custom-color-Custom-Color-2-container-dark);
    --cu-red-color-not-activated: var(--md-custom-color-Custom-Color-1-container-dark);
}

/* light */
.theme_light {
    /* not activated */
    --cu-signal-background-color-not-activated: var(--md-sys-color-surface-variant);
    --cu-signal-outline-color-not-activated: var(--md-sys-color-outline);

    --cu-signal-text-shape-color-not-activated: var(--md-sys-color-surface-variant);
    --cu-signal-text-shape-background-color-not-activated: var(--md-sys-color-on-surface-variant);

    /* activated */
    --cu-green-color-activated: var(--md-custom-color-Custom-Color-3);
    --cu-yellow-color-activated: var(--md-custom-color-Custom-Color-2-dark);
    --cu-red-color-activated: var(--md-custom-color-Custom-Color-1-palette-luminance-50);

    --cu-signal-background-color-activated: var(--web-noren-color);
    --cu-signal-outline-color-activated: var(--md-sys-color-outline-variant);

    --cu-signal-text-shape-color-activated: var(--md-sys-color-on-secondary-container);
    --cu-signal-text-shape-background-color-activated: var(--md-sys-color-secondary-container);
}

/* dark */
/* 
@media (prefers-color-scheme: dark) {
    :root {
        --cu-signal-background-color-not-activated: var(--md-sys-color-surface-variant);
        --cu-signal-outline-color-not-activated: var(--md-sys-color-outline);

        --cu-signal-text-shape-color-not-activated: var(--md-sys-color-surface-variant);
        --cu-signal-text-shape-background-color-not-activated: var(--md-sys-color-on-surface-variant);

        --cu-green-color-activated: var(--md-custom-color-Custom-Color-3-palette-luminance-50);
        --cu-yellow-color-activated: var(--md-custom-color-Custom-Color-2-palette-luminance-50);
        --cu-red-color-activated: var(--md-custom-color-Custom-Color-1-palette-luminance-50);

        --cu-signal-background-color-activated: #ffdad4;
        --cu-signal-outline-color-activated: var(--md-sys-color-outline-variant);

        --cu-signal-text-shape-color-activated: var(--md-sys-color-on-secondary-container);
        --cu-signal-text-shape-background-color-activated: var(--md-sys-color-secondary-container);
    }
}
*/

.theme_dark {
    /* not activated */
    --cu-signal-background-color-not-activated: var(--md-sys-color-surface-variant);
    --cu-signal-outline-color-not-activated: var(--md-sys-color-outline);

    --cu-signal-text-shape-color-not-activated: var(--md-sys-color-surface-variant);
    --cu-signal-text-shape-background-color-not-activated: var(--md-sys-color-on-surface-variant);

    /* activated */
    --cu-green-color-activated: var(--md-custom-color-Custom-Color-3-palette-luminance-50);
    --cu-yellow-color-activated: var(--md-custom-color-Custom-Color-2-palette-luminance-50);
    --cu-red-color-activated: var(--md-custom-color-Custom-Color-1-palette-luminance-50);

    --cu-signal-background-color-activated: #ffdad4;
    --cu-signal-outline-color-activated: var(--md-sys-color-outline-variant);

    --cu-signal-text-shape-color-activated: var(--md-sys-color-on-secondary-container);
    --cu-signal-text-shape-background-color-activated: var(--md-sys-color-secondary-container);
}

/* ------------------------------
Font
------------------------------ */
.content__container {
    container: content / inline-size;
}

@container content (width <600px) {
    signals-with-text {
        --cu-signal-text-font-weight-not-activated: 400px;
        --cu-signal-text-font-size-not-activated: 12px;
        --cu-signal-text-letter-spacing-not-activated: 0.40px;
        --cu-signal-text-line-height-not-activated: 16px;

        --cu-signal-text-font-weight-activated: 400px;
        --cu-signal-text-font-size-activated: 14px;
        --cu-signal-text-letter-spacing-activated: 0.25px;
        --cu-signal-text-line-height-activated: 20px;
    }
}

@container content (600px <=width) {
    signals-with-text {
        --cu-signal-text-font-weight-not-activated: 400px;
        --cu-signal-text-font-size-not-activated: 14px;
        --cu-signal-text-letter-spacing-not-activated: 0.25x;
        --cu-signal-text-line-height-not-activated: 20px;

        --cu-signal-text-font-weight-activated: 400px;
        --cu-signal-text-font-size-activated: 16px;
        --cu-signal-text-letter-spacing-activated: 0.50px;
        --cu-signal-text-line-height-activated: 24px;
    }
}

/* ------------------------------
Appearance
------------------------------ */
.content__container {
    container: content / inline-size;
}

@container content (width <600px) {
    signals-with-text {
        --cu-signal-row-gap: 12px;
    }
}

@container content (600px <=width) {
    signals-with-text {
        --cu-signal-row-gap: 16px;
    }
}