/* Koi colours */
:root {
  --color-dark: #24323a;
  --color-dark-glare: color-mix(in oklab, #24323a, white 10%);
  --color-mid: #e0e0e0;
  --color-light: #ffffff;
  --color-primary: #266dd3;
  --color-tint: #f2f2ee;
  --color-brand-glare: #ff7a32;
  --color-brand: #ec662b;
  --color-brand-shade: #cc4700;
  --focus-color: #fd0;

  /* alerts */
  --color-success: #129d7f;
  --color-warning: #ffc759;
  --color-alert: #ea3946;
  --color-notice: #2563eb;
}

:root {
  --gutter: var(--space-m-l);
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 300ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --stroke: 1px solid var(--color-tint);
  --radius-s: 0.2rem;
  --radius-m: 0.75rem;
  --radius-l: 2.5rem;
  --uppercase-kerning: 0.04ch;
}

:root {
  --stroke-input-width: 1px;
  --stroke-input: var(--stroke-input-width) solid var(--color-mid);
  --input-radius: 0;
  --input-size: var(--size-step-4);
  --small-input-size: var(--size-step-2);
  --focus-width: 2px;
  --focus-outline: var(--focus-width) solid var(--focus-color);
  --focus-shadow: currentColor inset 0 0 0 1px;
  --govuk-error-color: var(--color-alert);
  --govuk-hint-color: var(--color-mid);
}

/* Font sizes */
/* @link https://utopia.fyi/type/calculator?c=600,14,1.2,1600,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  /* Step -2: 11.1111px → 10.24px */
  --size-step--2: clamp(0.64rem, 0.7271rem + -0.0871vw, 0.6944rem);
  /* Step -1: 13.3333px → 12.8px */
  --size-step--1: clamp(0.8rem, 0.8533rem + -0.0533vw, 0.8333rem);
  /* Step 0: 16px → 16px */
  --size-step-0: clamp(1rem, 1rem + 0vw, 1rem);
  /* Step 1: 19.2px → 20px */
  --size-step-1: clamp(1.2rem, 1.17rem + 0.08vw, 1.25rem);
  /* Step 2: 23.04px → 25px */
  --size-step-2: clamp(1.44rem, 1.3665rem + 0.196vw, 1.5625rem);
  /* Step 3: 27.648px → 31.25px */
  --size-step-3: clamp(1.728rem, 1.5929rem + 0.3602vw, 1.9531rem);
  /* Step 4: 33.1776px → 39.0625px */
  --size-step-4: clamp(2.0736rem, 1.8529rem + 0.5885vw, 2.4414rem);
  /* Step 5: 39.8131px → 48.8281px */
  --size-step-5: clamp(2.4883rem, 2.1503rem + 0.9015vw, 3.0518rem);
}

/* Fluid spacing */
/* @link https://utopia.fyi/space/calculator?c=600,14,1.2,1600,16,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  /* Space 3xs: 4px → 4px */
  --space-3xs: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
  /* Space 2xs: 7px → 8px */
  --space-2xs: clamp(0.4375rem, 0.4rem + 0.1vw, 0.5rem);
  /* Space xs: 11px → 12px */
  --space-xs: clamp(0.6875rem, 0.65rem + 0.1vw, 0.75rem);
  /* Space s: 14px → 16px */
  --space-s: clamp(0.875rem, 0.8rem + 0.2vw, 1rem);
  /* Space m: 21px → 24px */
  --space-m: clamp(1.3125rem, 1.2rem + 0.3vw, 1.5rem);
  /* Space l: 28px → 32px */
  --space-l: clamp(1.75rem, 1.6rem + 0.4vw, 2rem);
  /* Space xl: 42px → 48px */
  --space-xl: clamp(2.625rem, 2.4rem + 0.6vw, 3rem);
  /* Space 2xl: 56px → 64px */
  --space-2xl: clamp(3.5rem, 3.2rem + 0.8vw, 4rem);
  /* Space 3xl: 84px → 96px */
  --space-3xl: clamp(5.25rem, 4.8rem + 1.2vw, 6rem);

  /* One-up pairs */
  /* Space 3xs-2xs: 4px → 8px */
  --space-3xs-2xs: clamp(0.25rem, 0.1rem + 0.4vw, 0.5rem);
  /* Space 2xs-xs: 7px → 12px */
  --space-2xs-xs: clamp(0.4375rem, 0.25rem + 0.5vw, 0.75rem);
  /* Space xs-s: 11px → 16px */
  --space-xs-s: clamp(0.6875rem, 0.5rem + 0.5vw, 1rem);
  /* Space s-m: 14px → 24px */
  --space-s-m: clamp(0.875rem, 0.5rem + 1vw, 1.5rem);
  /* Space m-l: 21px → 32px */
  --space-m-l: clamp(1.3125rem, 0.9rem + 1.1vw, 2rem);
  /* Space l-xl: 28px → 48px */
  --space-l-xl: clamp(1.75rem, 1rem + 2vw, 3rem);
  /* Space xl-2xl: 42px → 64px */
  --space-xl-2xl: clamp(2.625rem, 1.8rem + 2.2vw, 4rem);
  /* Space 2xl-3xl: 56px → 96px */
  --space-2xl-3xl: clamp(3.5rem, 2rem + 4vw, 6rem);

  /* Custom pairs */
  /* Space s-l: 14px → 32px */
  --space-s-l: clamp(0.875rem, 0.2rem + 1.8vw, 2rem);
}