:root {
  /* Primary */
  --color-blue-50: #e0e3f5;
  --color-blue-100: #c5cbed;
  --color-blue-200: #8a98db;
  --color-blue-300: #4c61c8;
  --color-blue-400: #2f4198;
  --color-blue-500: #1d285e; /* <-- NIHR navy */
  --color-blue-600: #17204a;
  --color-blue-700: #111737;
  --color-blue-800: #0c1127;
  --color-blue-900: #060813;
  --color-blue-950: #020308;

  /* Pale yellow backgrounds */
  --color-olive-50: #fefdfb;
  --color-olive-100: #fdfaf7;
  --color-olive-200: #faf4ea;
  --color-olive-300: #f8efe2; /* <-- NIHR putty */
  --color-olive-400: #f4e6d2;
  --color-olive-500: #f0ddc1;
  --color-olive-600: #ecd4b1;
  --color-olive-700: #e7c99c;
  --color-olive-800: #e3c08c;
  --color-olive-900: #dfb67c;
  --color-olive-950: #ddb273;

  /* Vivid orange */
  --color-orange-50: color-mix(in srgb, var(--coral) 50%, white);
  --color-orange-100: color-mix(in srgb, var(--coral) 60%, white);
  --color-orange-200: color-mix(in srgb, var(--coral) 70%, white);
  --color-orange-300: color-mix(in srgb, var(--coral) 80%, white);
  --color-orange-400: color-mix(in srgb, var(--coral) 90%, white);
  --color-orange-500: var(--coral);
  --color-orange-600: color-mix(in srgb, var(--coral) 90%, var(--color-blue-800));
  --color-orange-700: color-mix(in srgb, var(--coral) 80%, var(--color-blue-800));
  --color-orange-800: color-mix(in srgb, var(--coral) 70%, var(--color-blue-800));
  --color-orange-900: color-mix(in srgb, var(--coral) 60%, var(--color-blue-800));
  --color-orange-950: color-mix(in srgb, var(--coral) 50%, var(--color-blue-800));

  --color-green-50: oklch(0.949 0.066 154.92);
  --color-green-100: oklch(0.896 0.146 154.13);
  --color-green-200: oklch(0.818 0.161 153.81);
  --color-green-300: oklch(0.734 0.144 153.87);
  --color-green-400: oklch(0.658 0.129 153.84);
  --color-green-500: oklch(0.573 0.112 153.97);
  --color-green-600: oklch(0.481 0.095 153.52);
  --color-green-700: oklch(0.398 0.078 153.75);
  --color-green-800: oklch(0.313 0.062 153.67);
  --color-green-900: oklch(0.219 0.043 154.45);
  --color-green-950: oklch(0.172 0.033 153.59);

  /* NIHR: Primary palette */
  --coral: #FC5C5D;
  --navy: #1D285E;
  --off-black: #3C3C3C;
  /* --coral-text: color-mix(in srgb, var(--coral) 10%, #111737); */
  --coral-text: var(--color-navy-900);
  /* --coral-hover: color-mix(in srgb, var(--coral) 50%, black); */
  --coral-hover: black;

  /* NIHR: Secondary palette */
  --glove-blue: #c7e9ff;
  --blue-flame: #0051C2;
  --lilac: #C4C5FF;
  --twilight: #3E439C;
  --pink-quartz: #ffd1e0;
  --berry: #804055;
  --sunshine: #FFE626;
  --teal: #125866;

  /* NIHR: Neutral palette */
  --putty: #faf4eb;
  --steel: #c5dce5;

  --font-sans: "Lato", sans-serif;

  --dp-header-bg: var(--color-primary);
  --dp-header-bg-elevated: var(--color-blue-600);
  --dp-header-border: transparent;
  --dp-header-fg: white;
  --ui-header-height: 96px;

  --dp-header-logo-height: 28px;

  --ui-text: var(--color-blue-600);
}

.prose:not(.prose-invert) {
  --tw-prose-headings: var(--ui-text);
  --tw-prose-bold: var(--ui-text);
  --tw-prose-bullets: var(--ui-text);
  --tw-prose-body: var(--ui-text);
  --tw-prose-counters: var(--ui-text);
}
.prose:not(.prose-lg):not(.prose-xl) {
  font-size: 18px;
}

.blogindex,
.blogpost {
  background-color: var(--color-olive-100);
  --ui-bg: var(--color-olive-100);
  /* --ui-bg-elevated: var(--color-olive-600); */
  --ui-border: color-mix(in srgb, var(--ui-primary) 50%, var(--ui-bg));
  --ui-text-muted: color-mix(in srgb, var(--ui-primary) 80%, var(--ui-bg));
}