@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  /* Brand palette */
  --color-wellness-white: oklch(0.9777 0.0085 225.08); /* #f2f9fc */
  --color-wellness-white-950: oklch(0.9507 0.0219 219.25); /* #e3f2f8 */
  --color-tenacious-turquoise: oklch(0.8887 0.1012 209.71); /* #83edff */
  --color-fearless-fuchsia: oklch(0.7041 0.1592 292.61); /* #a48af9 */
  --color-vitality-violet: oklch(0.6338 0.231 299.12); /* #a15cff */
  --color-vitality-violet-darker: oklch(0.5784 0.2631 295.9); /* #8e3dff */
  --color-potent-purple: oklch(0.5319 0.254 284.66); /* #683cf5 */
  --color-mindful-midnight: oklch(0.225 0.1065 293.96); /* #210847 */

  /* Other colours */
  --color-black: oklch(0 0 0);
  --color-gray-100: oklch(0.1 0 0);
  --color-gray-200: oklch(0.2 0 0);
  --color-gray-250: oklch(0.25 0 0);
  --color-gray-300: oklch(0.3 0 0);
  --color-gray-400: oklch(0.4 0 0);
  --color-gray-500: oklch(0.5 0 0);
  --color-gray-600: oklch(0.6 0 0);
  --color-gray-700: oklch(0.7 0 0);
  --color-gray-800: oklch(0.8 0 0);
  --color-gray-900: oklch(0.9 0 0);
  --color-gray-950: oklch(0.95 0 0);
  --color-white: oklch(1 0 0);

  /* Colour aliases */
  --color-primary: var(--color-potent-purple);
  --color-primary-contrast: var(--color-white);
  --color-secondary: var(--color-vitality-violet-darker);
  --color-secondary-contrast: var(--color-white);

  --color-info-dark: color-mix(in oklab, var(--color-info) 70%, black);
  --color-info: var(--color-vitality-violet-darker);
  --color-info-light: color-mix(in oklab, var(--color-info) 20%, white);
  --color-info-lighter: color-mix(in oklab, var(--color-info) 10%, white);

  --color-info-700: var(--color-fearless-fuchsia);
  --color-info-600: oklch(0.59 0.2 292.61);

  --color-success-dark: color-mix(in oklab, var(--color-success) 70%, black);
  --color-success: var(--color-potent-purple);
  --color-success-light: color-mix(in oklab, var(--color-success) 20%, white);
  --color-new-success: var(--color-potent-purple);

  /* Will be replaced by rebrand work. */
  --color-warning-dark: oklch(0.4073 0.1141 42.38);
  --color-warning: oklch(0.7382 0.1579 75.18);
  --color-warning-light: oklch(0.9416 0.0584 83);

  --color-error-dark: oklch(0.3999 0.1641 29.23);
  --color-error: oklch(0.6212 0.1885 18.34);
  --color-error-light: oklch(0.8677 0.0735 7.09);

  --color-selected-dark: color-mix(in oklab, var(--color-selected) 70%, black);
  --color-selected: var(--color-vitality-violet);
  --color-selected-light: color-mix(in oklab, var(--color-selected) 20%, white);

  --color-input-border: color-mix(in oklab, var(--color-text) 10%, transparent);
  --color-input-border-focussed: var(--color-potent-purple);

  --color-text: var(--color-mindful-midnight);
  --color-link: var(--color-potent-purple);
  --color-link-visited: var(--color-vitality-violet-darker);

  --font-system-sans:
    -apple-system,
    BlinkMacSystemFont,
    'Helvetica Neue',
    'Helvetica',
    'Segoe UI',
    sans-serif;
  --font-body: 'Figtree', var(--font-system-sans);
  --font-display: 'Kind Sans', var(--font-body);
}
@media (width <= 36rem) {
  :root {
    font-size: 0.96em;
  }
}
@media (width <= 28rem) {
  :root {
    font-size: 0.92em;
  }
}

body {
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
}
.content-text {
  color: inherit !important;
}
  
div.subtitle,
h2.subtitle {
  font-size: 1.3em;
}

/* Buttons */
/*
[class^="Button__StyledButton-"] {
  padding: 0.3rem 1.2rem 0.4rem !important;
  height: initial !important;
  border: none !important;
  border-radius: 0.35rem !important;
  font: inherit !important;
  font-weight: 500 !important;
  font-size: 1.18em !important;
  text-transform: initial !important;
  color: var(--color-text) !important;
  background-color: var(--color-tenacious-turquoise) !important;
}
[class^="Button__StyledButton-"]:disabled {
  opacity: 1;
  color: color-mix(in oklab, var(--color-text) 50%, transparent) !important;
  background-color: color-mix(in oklab, var(--color-tenacious-turquoise) 40%, var(--color-white)) !important;
}
[class^="Button__StyledButton-"] [class^="Button__ArrowRightIcon-"] {
  display: none;
}
*/
[class^="Button__StyledButton-"] {
  color: var(--color-potent-purple) !important;
  border-color: var(--color-potent-purple) !important;
}
[class^="Button__StyledButton-"]:is(:hover, :active) {
  background-color: var(--color-potent-purple) !important;
  border-color: var(--color-potent-purple) !important;
  color: var(--color-white) !important;
}
[class^="Button__StyledButton-"] svg path {
  fill: currentColor !important;
}

:is(.button-wrap, [class^="StepButtons__Wrapper"]) button:has([class^="styles__IconWrap-"]) {
  border: none !important;
  background-color: color-mix(in oklab, var(--color-text) 10%, transparent) !important;
  aspect-ratio: 1;
  transition: background-color 0.2s ease;
}
:is(.button-wrap, [class^="StepButtons__Wrapper"]) button:has([class^="styles__IconWrap-"]):hover {
  background-color: color-mix(in oklab, var(--color-text) 20%, transparent) !important;
}
:is(.button-wrap, [class^="StepButtons__Wrapper"]) button [class^="styles__IconWrap-"] {
  color: var(--color-text) !important;
  transform: scale(1.2);
}
:is(.button-wrap, [class^="StepButtons__Wrapper"]) button [class^="styles__IconWrap-"] svg path {
  fill: currentColor !important;
}

/* Fields */
.ston-field-wrap {
  border-radius: 0.6rem !important;
  border-width: 2px !important;
  border-color: var(--color-input-border) !important;
}
.ston-field-wrap:focus-within {
  outline: none !important;
  border-color: var(--color-input-border-focussed) !important;
}
[class^="ButtonFieldSelect-styles__ButtonElement-"] {
  font-size: inherit;
}
[class^="ButtonFieldSelect-styles__Text-"] {
  font: inherit !important;
}

/* Tiles */
[class^="Tile__TileGrid-"] {
  gap: 0.6rem !important;
}
a.tile {
  min-height: 4.5rem !important;
  padding: 0.8rem 3.5rem 0.8rem 1.2rem !important;
  font-size: inherit;
  border-radius: 0.6rem;
  border: 2px solid var(--color-input-border);
  color: inherit;
  background-color: var(--color-white);
  transition: border-color 0.2s ease;
}
a.tile:hover {
  box-shadow: none;
  border-color: color-mix(in oklab, var(--color-text) 25%, transparent);
}
a.tile svg path {
  fill: var(--color-text);
  transform: scale(1.2);
  transform-origin: center;
}

/* Rich text */
.content-text a {
  color: var(--color-link) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 0.1em !important;
  text-underline-offset: 0.15em;
  border-radius: 0.1em;
  box-decoration-break: clone;
  transition: background-color 0.2s ease-in-out;
}
.content-text a:is(:hover, :focus) {
  --color-highlight: color-mix(in oklab, currentColor 10%, transparent);
  background-color: var(--color-highlight);
}

/* Progress bar */
[class^="StepsFooter-styles__StepButtonsCanvas-"] {
  border-top: none !important;
}
[class^="ProgressBar__Canvas-"] {
  width: calc(100% - 24px * 2) !important;
  left: 24px !important;
}
[class^="ProgressBar__Line-"],
[class^="ProgressBar__Bar-"] {
  height: 0.4em !important;
  border-radius: 1000vmax !important;
}
[class^="ProgressBar__Line-"] {
  background-color: var(--color-success-light) !important;
}
[class^="ProgressBar__Bar-"] {
  background-color: var(--color-success) !important;
}
[class^="ProgressBar__Text-"] {
  display: none;
}

/*
div.content-text { }
div.content-text ul { }

.content-text aside.tip { }
.content-text aside.warning { }

.button-wrap button { }
.button-wrap button:hover { }
.button-wrap button:disabled { }

.button-wrap .back-button { }
.button-wrap .back-button svg path { }

a.tile { }
a.tile svg path { }

div.radio-wrap { }
div.radio-wrap label { }
div.radio-wrap .radio-check { }

div.dropdown-wrap { }
div.dropdown-wrap li { }
*/