/*
 * Color tokens and contrast mode
 *
 * The theme's colors are tokens. The magenta, cyan and yellow defaults are placeholders that
 * child themes replace; a child theme sets the tokens (or its own rules) for its design.
 *
 * The A11y mode contrast_mode of iw-wp-utils sets a palette with at least 7:1 (SC 1.4.6):
 * black text and lines on white surfaces. It applies when the visitor switches it on
 * (html.iw-a11y-contrast_mode) and, without a choice, when the system asks for more contrast
 * (html.iw-a11y-auto-contrast_mode). In Windows high contrast the browser sets the colors itself.
 *
 * @package     iw-foundation-theme
 * @subpackage  style/colors
 * @since       1.5.0
 -------------------------------------------------------------- */

:root {
    --iw-color-text: #333;
    --iw-color-background: #fff;
    --iw-color-link: #101010;
    --iw-color-link-hover: #b3b3b3;
    --iw-color-primary: #EF17EF;
    --iw-color-secondary: #17EFEF;
    --iw-color-tertiary: #EFEF17;
    --iw-color-accent: #31B9D5;
}

html.iw-a11y-contrast_mode {
    --iw-color-text: #000;
    --iw-color-background: #fff;
    --iw-color-link: #000;
    --iw-color-link-hover: #000;
    --iw-color-primary: #000;
    --iw-color-secondary: #000;
    --iw-color-tertiary: #fff;
    --iw-color-accent: #000;
}

@media (prefers-contrast: more) and (not (forced-colors: active)) {
    html.iw-a11y-auto-contrast_mode {
        --iw-color-text: #000;
        --iw-color-background: #fff;
        --iw-color-link: #000;
        --iw-color-link-hover: #000;
        --iw-color-primary: #000;
        --iw-color-secondary: #000;
        --iw-color-tertiary: #fff;
        --iw-color-accent: #000;
    }
}

/* Components whose colors would meet in the contrast palette. State is shown by underline or by
   an inverted surface; links in running text are underlined, since they share the text color
   (SC 1.4.1). The same rules follow for the automatic mode. */
html.iw-a11y-contrast_mode a:hover,
html.iw-a11y-contrast_mode .iw_navigation li.active > a,
html.iw-a11y-contrast_mode .iw_navigation li.active-parent > a,
html.iw-a11y-contrast_mode .iw_main :where(p, li, td, dd, figcaption) a {
    text-decoration: underline;
}

html.iw-a11y-contrast_mode button.iw_icon_button,
html.iw-a11y-contrast_mode .iw_mobile_navigation_buttons button.iw_mobile_navigation_button {
    background-color: var(--iw-color-text, #000);
    color: var(--iw-color-background, #fff);
}

html.iw-a11y-contrast_mode button.iw_icon_button svg {
    fill: currentColor;
}

html.iw-a11y-contrast_mode .iw_header_search_area {
    background: var(--iw-color-background, #fff);
    border-bottom: 2px solid var(--iw-color-text, #000);
}

html.iw-a11y-contrast_mode .iw_contact_form .iw-custom-select .option:hover,
html.iw-a11y-contrast_mode .iw_contact_form .iw-custom-select .option.selected,
html.iw-a11y-contrast_mode .iw_contact_form .iw-improved-custom-select .option:hover,
html.iw-a11y-contrast_mode .iw_contact_form .iw-improved-custom-select .option.selected {
    background-color: var(--iw-color-text, #000);
    color: var(--iw-color-background, #fff);
}

html.iw-a11y-contrast_mode ::placeholder {
    color: var(--iw-color-text, #000);
    opacity: 1;
}

@media (prefers-contrast: more) and (not (forced-colors: active)) {
    html.iw-a11y-auto-contrast_mode a:hover,
    html.iw-a11y-auto-contrast_mode .iw_navigation li.active > a,
    html.iw-a11y-auto-contrast_mode .iw_navigation li.active-parent > a,
    html.iw-a11y-auto-contrast_mode .iw_main :where(p, li, td, dd, figcaption) a {
        text-decoration: underline;
    }

    html.iw-a11y-auto-contrast_mode button.iw_icon_button,
    html.iw-a11y-auto-contrast_mode .iw_mobile_navigation_buttons button.iw_mobile_navigation_button {
        background-color: var(--iw-color-text, #000);
        color: var(--iw-color-background, #fff);
    }

    html.iw-a11y-auto-contrast_mode button.iw_icon_button svg {
        fill: currentColor;
    }

    html.iw-a11y-auto-contrast_mode .iw_header_search_area {
        background: var(--iw-color-background, #fff);
        border-bottom: 2px solid var(--iw-color-text, #000);
    }

    html.iw-a11y-auto-contrast_mode .iw_contact_form .iw-custom-select .option:hover,
    html.iw-a11y-auto-contrast_mode .iw_contact_form .iw-custom-select .option.selected,
    html.iw-a11y-auto-contrast_mode .iw_contact_form .iw-improved-custom-select .option:hover,
    html.iw-a11y-auto-contrast_mode .iw_contact_form .iw-improved-custom-select .option.selected {
        background-color: var(--iw-color-text, #000);
        color: var(--iw-color-background, #fff);
    }

    html.iw-a11y-auto-contrast_mode ::placeholder {
        color: var(--iw-color-text, #000);
        opacity: 1;
    }
}