/*
  Turquoise light micro theme
  Ensure this theme sets all of our global semantic variables supporting light and dark mode
  https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme
  https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/light-dark

  Variable naming convention:
  --i-{component (optional), e.g. button/input}-{cssProperty, e.g. background/color/border}-{variant (optional), e.g. primary/secondary}
*/
.i-theme-turquoise-10 {
    --i-color-text: light-dark(var(--lnpi-color-navy), var(--lnpi-color-white));
    --i-color-text-danger: var(--lnpi-color-tomato-red);
    --i-color-text-success: var(--lnpi-color-green);
    --i-color-text-warning: var(--lnpi-color-yellow);
    --i-color-text-info: light-dark(var(--lnpi-color-navy-50), var(--lnpi-color-dark-navy-50));
    --i-color-heading: var(--i-color-text);
    --i-color-link: var(--i-color-text);
    --i-color-link-hover: light-dark(var(--lnpi-color-dark-navy), var(--lnpi-color-turquoise-50));
    --i-color-text-lead: var(--i-color-text);
    --i-color-text-strong: var(--i-color-text);

    /* Backgrounds */
    --i-background-color: light-dark(var(--lnpi-color-turquoise-10), var(--lnpi-color-navy));
    --i-background-image: none;
    --i-background-color-secondary: light-dark(
            var(--lnpi-color-dark-navy-20),
            var(--lnpi-color-dark-navy)
    );

    /* Blockquote */
    --i-blockquote-border-color: var(--i-accent-color);
    --i-blockquote-border-width: var(--i-spacing-2xs);
    --i-blockquote-border-style: solid;
    --i-blockquote-border: var(--i-blockquote-border-width) var(--i-blockquote-border-style)
    var(--i-blockquote-border-color);

    /* Borders */
    --i-border-color: light-dark(var(--lnpi-color-turquoise-50), var(--lnpi-color-dark-turquoise));
    --i-border: 1px solid var(--i-border-color);

    --i-outline: 2px solid light-dark(var(--lnpi-color-turquoise), var(--lnpi-color-white));
    --i-outline-offset: 2px;

    --i-accent-color: light-dark(var(--lnpi-color-navy), var(--lnpi-color-yellow));

    /* State colours */
    --i-color-success: var(--lnpi-color-green);
    --i-color-success-50: var(--lnpi-color-green-50);
    --i-color-success-20: var(--lnpi-color-green-20);
    --i-color-success-10: var(--lnpi-color-green-10);
    --i-color-warning: var(--lnpi-color-yellow);
    --i-color-warning-50: var(--lnpi-color-yellow-50);
    --i-color-warning-20: var(--lnpi-color-yellow-20);
    --i-color-warning-10: var(--lnpi-color-yellow-10);
    --i-color-danger: var(--lnpi-color-tomato-red);
    --i-color-danger-50: var(--lnpi-color-tomato-red-50);
    --i-color-danger-20: var(--lnpi-color-tomato-red-20);
    --i-color-danger-10: var(--lnpi-color-tomato-red-10);
    --i-color-info: var(--lnpi-color-bright-turquoise);
    --i-color-info-50: var(--lnpi-color-bright-turquoise-50);
    --i-color-info-20: var(--lnpi-color-bright-turquoise-20);
    --i-color-info-10: var(--lnpi-color-bright-turquoise-10);

    /* Component variables */

    /* Accordion */
    --i-accordion-border-theme: none;

    /* Button */
    --i-button-color: light-dark(var(--lnpi-color-bright-turquoise), var(--lnpi-color-navy));
    --i-button-color-active: light-dark(var(--lnpi-color-navy), var(--lnpi-color-bright-turquoise));
    --i-button-color-hover: light-dark(var(--lnpi-color-navy), var(--lnpi-color-bright-turquoise));
    --i-button-background-color: light-dark(
            var(--lnpi-color-navy),
            var(--lnpi-color-bright-turquoise)
    );
    --i-button-background-color-hover: transparent;
    --i-button-background-color-active: transparent;
    --i-button-border-color: light-dark(var(--lnpi-color-navy), var(--lnpi-color-bright-turquoise));
    --i-button-border-color-hover: light-dark(
            var(--lnpi-color-navy),
            var(--lnpi-color-bright-turquoise)
    );
    --i-button-border-color-active: light-dark(
            var(--lnpi-color-navy),
            var(--lnpi-color-bright-turquoise)
    );
    --i-button-box-shadow-color: light-dark(
            var(--lnpi-color-navy),
            var(--lnpi-color-bright-turquoise)
    );

    --i-button-color-secondary: light-dark(
            var(--lnpi-color-navy),
            var(--lnpi-color-bright-turquoise)
    );
    --i-button-color-secondary-active: light-dark(
            var(--lnpi-color-bright-turquoise),
            var(--lnpi-color-navy)
    );
    --i-button-color-secondary-hover: light-dark(
            var(--lnpi-color-bright-turquoise),
            var(--lnpi-color-navy)
    );
    --i-button-background-color-secondary: transparent;
    --i-button-background-color-secondary-hover: light-dark(
            var(--lnpi-color-navy),
            var(--lnpi-color-bright-turquoise)
    );
    --i-button-background-color-secondary-active: light-dark(
            var(--lnpi-color-navy),
            var(--lnpi-color-bright-turquoise)
    );
    --i-button-border-color-secondary: light-dark(
            var(--lnpi-color-navy),
            var(--lnpi-color-bright-turquoise)
    );
    --i-button-border-color-secondary-hover: light-dark(
            var(--lnpi-color-navy),
            var(--lnpi-color-bright-turquoise)
    );
    --i-button-border-color-secondary-active: light-dark(
            var(--lnpi-color-navy),
            var(--lnpi-color-bright-turquoise)
    );
    --i-button-box-shadow-color-secondary: light-dark(
            var(--lnpi-color-navy),
            var(--lnpi-color-bright-turquoise)
    );

    /* Carousel */
    --i-carousel-button-color-stroke: light-dark(var(--lnpi-color-navy), var(--lnpi-color-white));
    --i-carousel-button-color-fill: var(--lnpi-color-turquoise);

    /* Horizontal rule */
    --i-hr-border-color: light-dark(var(--lnpi-color-turquoise-50), var(--lnpi-color-dark-navy));

    /* Icons */
    --i-svg-color-stroke: light-dark(var(--lnpi-color-navy), var(--lnpi-color-white));
    --i-svg-color-accent: light-dark(
            var(--lnpi-color-turquoise),
            var(--lnpi-color-bright-turquoise)
    );

    /* Input */
    --i-input-color: light-dark(var(--lnpi-color-navy-50), var(--lnpi-color-dark-navy-50));
    --i-input-color-text: var(--i-color-text);
    --i-input-color-text-select: var(--i-input-color-text);
    --i-input-background-color: light-dark(var(--lnpi-color-white), transparent);
    --i-input-border-color: light-dark(var(--lnpi-color-turquoise), var(--lnpi-color-white));
    --i-input-border: 2px solid var(--i-input-border-color);
    --i-input-border-color-focus: light-dark(var(--lnpi-color-turquoise), var(--lnpi-color-white));
    --i-input-border-color-error: light-dark(var(--i-color-danger), var(--i-color-danger-50));
    --i-input-color-error: light-dark(var(--i-color-danger), var(--i-color-danger-50));
    --i-input-icon-color: light-dark(var(--lnpi-color-navy), var(--lnpi-color-bright-turquoise));
    --i-input-decorator-background-color: light-dark(transparent, var(--lnpi-color-dark-navy));
    --i-input-outline: var(--i-outline);
    --i-input-mandatory-indicator-color: var(--i-input-color-error);

    /* Lists */
    --i-list-marker-color: var(--i-accent-color);

    /* Tables */
    --i-table-head-background-color: light-dark(
            var(--lnpi-color-turquoise-50),
            var(--lnpi-color-dark-navy)
    );
    --i-table-head-color: light-dark(var(--lnpi-color-navy), var(--lnpi-color-white));
    --i-table-cell-border-color: light-dark(
            var(--lnpi-color-turquoise-50),
            var(--lnpi-color-dark-navy)
    );
    --i-table-cell-border: var(--i-table-cell-border-style) var(--i-table-cell-border-width)
    var(--i-table-cell-border-color);
}