/*
  Colour palette
  These variables are our colour palette and should never change per mode/theme
*/
:root,
:host {
    color-scheme: light dark;

    --lnpi-color-navy: #171c61;
    --lnpi-color-navy-50: #8b8daf;
    --lnpi-color-navy-20: #d1d2df;
    --lnpi-color-navy-10: #e7e8ef;
    --lnpi-color-dark-navy: #060938;
    --lnpi-color-dark-navy-50: #8385a1;
    --lnpi-color-dark-navy-20: #ceced9;
    --lnpi-color-dark-navy-10: #e6e6ec;
    --lnpi-color-turquoise: #2da5b9;
    --lnpi-color-turquoise-50: #95d1db;
    --lnpi-color-turquoise-20: #d5edf1;
    --lnpi-color-turquoise-10: #e9f5f7;
    --lnpi-color-bright-turquoise: #00ffff;
    --lnpi-color-bright-turquoise-50: #7fffff;
    --lnpi-color-bright-turquoise-20: #ccffff;
    --lnpi-color-bright-turquoise-10: #e5ffff;
    --lnpi-color-dark-turquoise: #267da0;
    --lnpi-color-dark-turquoise-50: #92bdcf;
    --lnpi-color-dark-turquoise-20: #d4e5ec;
    --lnpi-color-dark-turquoise-10: #e9f1f5;
    --lnpi-color-gray: #d7d7e1;
    --lnpi-color-gray-50: #ebebef;
    --lnpi-color-gray-20: #f7f7f9;
    --lnpi-color-gray-10: #fbfbfb;
    --lnpi-color-dark-magenta: #b40063;
    --lnpi-color-dark-magenta-50: #d97fb1;
    --lnpi-color-dark-magenta-20: #f0cce0;
    --lnpi-color-dark-magenta-10: #f7e5ef;
    --lnpi-color-tomato-red: #e9454e;
    --lnpi-color-tomato-red-50: #f3a1a6;
    --lnpi-color-tomato-red-20: #fbdadc;
    --lnpi-color-tomato-red-10: #fceced;
    --lnpi-color-yellow: #fde85e;
    --lnpi-color-yellow-50: #fdf3ae;
    --lnpi-color-yellow-20: #fffadf;
    --lnpi-color-yellow-10: #fefcee;
    --lnpi-color-green: #30804b;
    --lnpi-color-green-50: #97bfa4;
    --lnpi-color-green-20: #d6e5db;
    --lnpi-color-green-10: #ebf3ed;
    --lnpi-color-white: #ffffff;
    --lnpi-color-black: #000000;

    --lnpi-color-gradient-navy-turquoise: linear-gradient(
            0deg,
            var(--lnpi-color-navy) 0%,
            var(--lnpi-color-dark-turquoise) 75%,
            var(--lnpi-color-dark-turquoise) 100%
    );

    --lnpi-color-gradient-dark-navy-turquoise: linear-gradient(
            0deg,
            var(--lnpi-color-dark-navy) 0%,
            var(--lnpi-color-dark-turquoise) 75%,
            var(--lnpi-color-dark-turquoise) 100%
    );

    --lnpi-font-family-roboto-condensed: "Roboto Condensed", sans-serif;
    --lnpi-font-family-inter: "Inter", sans-serif;
}

/*
  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}
*/
:root,
:host,
.i-theme-default {
    /* Typography */
    --i-font-family-heading: var(--lnpi-font-family-roboto-condensed);
    --i-font-family-text: var(--lnpi-font-family-inter);

    --i-font-style-normal: normal;
    --i-font-style-italic: italic;

    /* Fluid scaling between 11.08px and 11.11px */
    --i-font-size-xs: clamp(
            0.6914rem,
            calc(0.6914rem + (0.003 / 63.75) * (100svw - 22.5rem)),
            0.6944rem
    );
    /* Fluid scaling between 12.44px and 13.33px */
    --i-font-size-sm: clamp(
            0.7778rem,
            calc(0.7778rem + (0.0555 / 63.75) * (100svw - 22.5rem)),
            0.8333rem
    );
    /* Fluid scaling between 14px and 16px */
    --i-font-size-md: clamp(0.875rem, calc(0.875rem + (0.125 / 63.75) * (100svw - 22.5rem)), 1rem);
    /* Fluid scaling between 15.75px and 19.2px */
    --i-font-size-lg: clamp(
            0.9844rem,
            calc(0.9844rem + (0.2156 / 63.75) * (100svw - 22.5rem)),
            1.2rem
    );
    /* Fluid scaling between 17.72px and 23.04px */
    --i-font-size-xl: clamp(
            1.1075rem,
            calc(1.1075rem + (0.3325 / 63.75) * (100svw - 22.5rem)),
            1.44rem
    );
    /* Fluid scaling between 19.93px and 27.65px */
    --i-font-size-2xl: clamp(
            1.4016rem,
            calc(1.4016rem + (0.672 / 63.75) * (100svw - 22.5rem)),
            2.0736rem
    );
    /* Fluid scaling between 22.5px and 33.18px */
    --i-font-size-3xl: clamp(
            1.7739rem,
            calc(1.7739rem + (1.2121 / 63.75) * (100svw - 22.5rem)),
            2.986rem
    );
    --i-font-size: var(--i-font-size-md);

    --i-font-weight-thin: 100;
    --i-font-weight-extra-light: 200;
    --i-font-weight-light: 300;
    --i-font-weight: 400;
    --i-font-weight-medium: 500;
    --i-font-weight-semi-bold: 600;
    --i-font-weight-bold: 700;
    --i-font-weight-extra-bold: 800;
    --i-font-weight-black: 900;

    --i-line-height: 1.5;
    --i-line-height-xs: 1.5;
    --i-line-height-sm: 1.5;
    --i-line-height-md: 1.5;
    --i-line-height-lg: 1.425;
    --i-line-height-xl: 1.35;
    --i-line-height-2xl: 1.275;
    --i-line-height-3xl: 1.2;

    --i-letter-spacing-xs: 0;
    --i-letter-spacing-sm: 0;
    --i-letter-spacing-md: 0;
    --i-letter-spacing-lg: 0;
    --i-letter-spacing-xl: 0;
    --i-letter-spacing-2xl: 0;
    --i-letter-spacing-3xl: 0;

    --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-active: var(--i-color-link);
    --i-color-link-hover: light-dark(var(--lnpi-color-dark-turquoise), var(--lnpi-color-turquoise-50));
    --i-color-link-visited: var(--i-color-link);
    --i-color-text-lead: var(--i-color-text);
    --i-color-text-strong: var(--i-color-text);

    /* Spacing */
    --i-breakpoint-sm: 40rem; /* 640px */
    --i-breakpoint-md: 48rem; /* 768px */
    --i-breakpoint-lg: 64rem; /* 1024px */
    --i-breakpoint-xl: 80rem; /* 1280px */
    --i-breakpoint-2xl: 96rem; /* 1536px */

    --i-spacing-2xs: 0.25rem; /** 4px **/
    --i-spacing-xs: 0.5rem; /** 8px **/
    --i-spacing-sm: 0.75rem; /** 12px **/
    --i-spacing-md: 1rem; /** 16px **/
    --i-spacing-lg: 1.5rem; /** 24px **/
    --i-spacing-xl: 2rem; /** 32px **/
    --i-spacing-2xl: 2.5rem; /** 40px **/
    --i-spacing-3xl: 3.5rem; /** 56px **/

    --i-margin-block-text: var(--i-spacing-sm);
    --i-margin-block-text-xs: var(--i-spacing-xs);
    --i-margin-block-text-sm: var(--i-spacing-sm);
    --i-margin-block-text-md: var(--i-spacing-sm);
    --i-margin-block-text-lg: var(--i-spacing-md);
    --i-margin-block-text-xl: var(--i-spacing-md);
    --i-margin-block-text-2xl: var(--i-spacing-md);
    --i-margin-block-text-3xl: var(--i-spacing-md);

    /* Backgrounds */
    --i-background-color: light-dark(var(--lnpi-color-white), var(--lnpi-color-dark-navy));
    --i-background-image: none;
    --i-background-color-secondary: light-dark(
            var(--lnpi-color-dark-navy-20),
            var(--lnpi-color-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), var(--lnpi-color-navy));
    --i-border: 1px solid var(--i-border-color);
    --i-border-radius-sm: 0.25rem;
    --i-border-radius-md: 0.375rem;
    --i-border-radius: 0.5rem;
    --i-border-radius-lg: 1rem;

    --i-outline: 2px solid var(--i-input-border-color);
    --i-outline-offset: 2px;
    --i-box-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --i-box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --i-box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --i-box-shadow-xl: 0 40px 30px 10px rgba(0, 0, 0, 0.5);
    --i-box-shadow-focus: 0 0 0 3px currentColor;

    --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);

    /** The following colours are common across both light and dark modes */
    --i-color-white: var(--lnpi-color-white);
    --i-color-black: var(--lnpi-color-black);

    --i-transition-duration: 0.2s;
    --i-transition-rotate: rotate var(--i-transition-duration) ease-in-out;
    --i-transition-all: all var(--i-transition-duration) ease;
    --i-transition-box-shadow: box-shadow var(--i-transition-duration) ease;
    --i-transition-opacity: opacity var(--i-transition-duration) ease-in-out;

    /* Component variables */

    /* Accordion */
    --i-accordion-border: var(--i-accordion-border-theme, var(--i-border));
    --i-accordion-border-radius: var(--i-border-radius-lg);
    --i-accordion-spacing: var(--i-spacing-md);

    /* Alert */
    --i-alert-marker-color: light-dark(var(--lnpi-color-navy), var(--lnpi-color-white));

    --i-alert-info-background-color: light-dark(var(--i-color-info-10), transparent);
    --i-alert-info-border-color: light-dark(var(--i-color-info), var(--i-color-info-50));
    --i-alert-info-icon-fill: light-dark(var(--i-color-info), var(--i-color-info-50));

    --i-alert-success-background-color: light-dark(var(--i-color-success-10), transparent);
    --i-alert-success-border-color: light-dark(var(--i-color-success), var(--i-color-success-50));
    --i-alert-success-icon-fill: light-dark(var(--i-color-success), var(--i-color-success-50));

    --i-alert-warning-background-color: light-dark(var(--i-color-warning-10), transparent);
    --i-alert-warning-border-color: light-dark(var(--i-color-warning), var(--i-color-warning-50));
    --i-alert-warning-icon-fill: light-dark(var(--i-color-warning), var(--i-color-warning-50));

    --i-alert-error-background-color: light-dark(var(--i-color-danger-10), transparent);
    --i-alert-error-border-color: light-dark(var(--i-color-danger), var(--i-color-danger-50));
    --i-alert-error-icon-fill: light-dark(var(--i-color-danger), var(--i-color-danger-50));

    /* Button */
    --i-button-color: light-dark(var(--lnpi-color-bright-turquoise), var(--lnpi-color-dark-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-dark-navy),
            var(--lnpi-color-bright-turquoise)
    );
    --i-button-border-color-active: light-dark(
            var(--lnpi-color-dark-navy),
            var(--lnpi-color-bright-turquoise)
    );
    --i-button-border-width: 2px;
    --i-button-box-shadow-color: light-dark(
            var(--lnpi-color-navy),
            var(--lnpi-color-bright-turquoise)
    );
    --i-button-outline-width: 2px;

    --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-turquoise-50),
            var(--lnpi-color-turquoise-20)
    );

    --i-button-color-success: light-dark(var(--i-background-color), var(--lnpi-color-white));
    --i-button-color-success-active: var(--lnpi-color-green);
    --i-button-color-success-hover: var(--lnpi-color-green);
    --i-button-background-color-success: var(--lnpi-color-green);
    --i-button-background-color-success-hover: var(--i-background-color);
    --i-button-background-color-success-active: var(--i-background-color);
    --i-button-border-color-success: var(--lnpi-color-green);
    --i-button-border-color-success-hover: var(--lnpi-color-green);
    --i-button-border-color-success-active: var(--lnpi-color-green);
    --i-button-box-shadow-color-success: light-dark(
            var(--lnpi-color-green-50),
            var(--lnpi-color-green-20)
    );

    --i-button-color-warning: light-dark(var(--lnpi-color-navy), var(--lnpi-color-dark-navy));
    --i-button-color-warning-active: var(--lnpi-color-yellow);
    --i-button-color-warning-hover: var(--lnpi-color-yellow);
    --i-button-background-color-warning: var(--lnpi-color-yellow);
    --i-button-background-color-warning-hover: var(--i-background-color);
    --i-button-background-color-warning-active: var(--i-background-color);
    --i-button-border-color-warning: var(--lnpi-color-yellow);
    --i-button-border-color-warning-hover: var(--lnpi-color-yellow);
    --i-button-border-color-warning-active: var(--lnpi-color-yellow);
    --i-button-box-shadow-color-warning: light-dark(
            var(--lnpi-color-yellow-50),
            var(--lnpi-color-yellow-20)
    );

    --i-button-color-danger: var(--lnpi-color-dark-navy);
    --i-button-color-danger-active: var(--lnpi-color-tomato-red);
    --i-button-color-danger-hover: var(--lnpi-color-tomato-red);
    --i-button-background-color-danger: var(--lnpi-color-tomato-red);
    --i-button-background-color-danger-hover: var(--i-background-color);
    --i-button-background-color-danger-active: var(--i-background-color);
    --i-button-border-color-danger: var(--lnpi-color-tomato-red);
    --i-button-border-color-danger-hover: var(--lnpi-color-tomato-red);
    --i-button-border-color-danger-active: var(--lnpi-color-tomato-red);
    --i-button-box-shadow-color-danger: light-dark(
            var(--lnpi-color-tomato-red-50),
            var(--lnpi-color-tomato-red-20)
    );

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

    /* Badge */
    --i-badge-border-width: 1px;
    --i-badge-border-color: var(--lnpi-color-black);
    --i-badge-border-radius: calc(var(--i-spacing-xs) / 2);

    --i-badge-color: unset;
    --i-badge-font-size: var(--i-font-size-xs);
    --i-badge-font-line-height: calc(var(--i-line-height-xl) / 2);
    --i-badge-font-weight: var(--i-font-weight-bold);
    --i-badge-letter-spacing: var(--i-letter-spacing-xs);

    --i-badge-background-color: var(--lnpi-color-white);
    --i-badge-theme-magenta: var(--lnpi-color-dark-magenta);
    --i-badge-theme-tomato-red: var(--lnpi-color-tomato-red);
    --i-badge-theme-navy: var(--lnpi-color-navy);

    /* Box */
    --i-box-background-color: var(--i-background-color);
    --i-box-border-color: var(--i-border-color);
    --i-box-border-radius: var(--i-border-radius);
    --i-box-padding: var(--i-spacing-md);

    /* 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);

    /* Container */
    /* Fluid spacing used for section padding and container gutters - scales from 24px to 72px */
    --i-section-spacing: clamp(1.5rem, calc(1.5rem + (3 / 63.75) * (100svw - 22.5rem)), 4.5rem);
    --i-container-max-width: 86.25rem; /* 1380px */

    /* Grid */
    --i-grid-gap: clamp(0.5rem, calc(0.5rem + (1 / 63.75) * (100svw - 22.5rem)), 1.5rem);
    /* Hero */
    --i-hero-max-width: 2560px;
    /* Horizontal rule */
    --i-hr-border-color: light-dark(var(--lnpi-color-turquoise-20), var(--lnpi-color-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: transparent;
    --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);

    /* Rules */
    --i-rules-marker-color: light-dark(
            var(--lnpi-color-dark-turquoise),
            var(--lnpi-color-turquoise)
    );
    --i-rules-divider-color: light-dark(var(--lnpi-color-turquoise), var(--lnpi-color-navy));

    /* Rules navigation */
    --i-rules-nav-spacing: var(--i-spacing-md);
    --i-rules-nav-spacing-vertical: var(--i-rules-nav-spacing, var(--i-spacing-md));

    /* Tables */
    --i-table-head-background-color: light-dark(
            var(--lnpi-color-turquoise-20),
            var(--lnpi-color-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-20), var(--lnpi-color-navy));
    --i-table-cell-border-width: 2px;
    --i-table-cell-border-style: solid;
    --i-table-cell-border: var(--i-table-cell-border-style) var(--i-table-cell-border-width)
    var(--i-table-cell-border-color);

    /* Tabs */
    --i-tabs-text-color: light-dark(var(--lnpi-color-navy), var(--lnpi-color-white));
    --i-tabs-border-color: light-dark(var(--lnpi-color-navy), var(--lnpi-color-white));
    --i-tabs-border-color-active: var(--lnpi-color-turquoise);
    --i-tabs-space-filler-color: light-dark(var(--lnpi-color-navy-20), var(--lnpi-color-white));
}

.i-light-mode {
    color-scheme: light;
}

.i-dark-mode {
    color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
    :root,
    :host {
        --i-transition-all: none !important;
        --i-transition-box-shadow: none !important;
        --i-transition-rotate: none !important;
        --i-transition-opacity: none !important;
    }
}