:root,
[data-theme='defra-light'] {
  /* page and component backgrounds */
  --color-panel: var(--color-white);
  /* card/modal/panel edges */
  --color-panel-border: var(--color-black);

  /* primary text */
  --color-body: var(--color-black);
  /* secondary/supporting text */
  --color-body-secondary: var(--color-black-tint-25);

  /* Defra brand colour */
  --color-accent: #008938;
  /* 
    FIXME: the below colour is the NEW Defra brand theme. 
    Once Defra agrees to use this new colour, we can delete the line above and uncomment the line below 
  */
  /* --color-accent: #00a33b; */

  /* contrast-safe accent for text on light backgrounds */
  --color-accent-safe: #008531;
  /* darkened accent for hover states */
  --color-accent-hover: color-mix(in srgb, var(--color-accent) 75%, black);
  /* heavily darkened accent for button shadow depth */
  --color-accent-shadow: color-mix(in srgb, var(--color-accent) 50%, black);
  /* text on accent/brand-coloured backgrounds */
  --color-on-accent: var(--color-white);

  /* link text */
  --color-link: var(--color-accent);
  /* link text on hover */
  --color-link-hover: var(--color-accent-hover);
  /* visited link text */
  --color-link-visited: var(--color-accent);
  /* active/pressed link text */
  --color-link-active: var(--color-black);

  /* borders and horizontal rules */
  --color-divider: var(--color-black-tint-80);
  /* form input borders */
  --color-divider-input: var(--color-black);

  /* GDS focus ring colour (always yellow) */
  --color-focus: var(--color-yellow);
  /* text on focus-yellow backgrounds */
  --color-on-focus: var(--color-black);

  /* error states */
  --color-error: var(--color-red);
  /* darkened error for hover states */
  --color-error-hover: color-mix(in srgb, var(--color-error) 75%, black);
  /* heavily darkened error for button shadow depth */
  --color-error-shadow: color-mix(in srgb, var(--color-error) 50%, black);
  /* text on error/destructive backgrounds */
  --color-on-error: var(--color-white);
  /* success states */
  --color-success: var(--color-green);

  /* very light neutral background e.g. secondary button base */
  --color-wash: var(--color-black-tint-95);
  /* mid neutral e.g. secondary button shadow */
  --color-neutral-mid: var(--color-black-tint-50);
  /* subtle backgrounds e.g. hover */
  --color-muted: var(--color-black-tint-80);

  /* surface colours derive from accent so they adapt when the theme accent changes */
  /* branded tinted surface */
  --color-surface: color-mix(in srgb, var(--color-accent) 5%, white);
  /* text on surface backgrounds */
  --color-on-surface: var(--color-black);
  /* borders within surface areas */
  --color-surface-divider: color-mix(in srgb, var(--color-accent) 50%, white);
  /* darkened surface colour */
  --color-surface-hover: color-mix(in srgb, var(--color-accent) 3%, white, black 4%);

  /* warning states */
  --color-warning: var(--color-yellow);
  /* text on warning backgrounds */
  --color-on-warning: var(--color-black);

  /* disabled component backgrounds */
  --color-disabled: var(--color-black-tint-80);
  /* text on disabled backgrounds */
  --color-on-disabled: var(--color-black-tint-50);

  /* subtle tag/chip backgrounds — tinted but light enough to avoid confusion with buttons */
  --color-neutral-subtle: var(--color-black-tint-80);
  --color-success-subtle: var(--color-green-tint-80);
  --color-warning-subtle: var(--color-yellow-tint-80);
  --color-error-subtle: var(--color-red-tint-80);
  --color-info-subtle: var(--color-blue-tint-80);
  /* derives from accent so it adapts per theme */
  --color-accent-subtle: color-mix(in srgb, var(--color-accent) 20%, white);

  /* text on subtle backgrounds — dark shade of the same colour family for a coloured-on-coloured look */
  /* warning and neutral stay black — yellow text fails contrast, grey has no useful hue */
  --color-on-neutral-subtle: var(--color-body);
  --color-on-success-subtle: var(--color-green-shade-25);
  --color-on-warning-subtle: var(--color-body);
  --color-on-error-subtle: var(--color-red-shade-25);
  --color-on-info-subtle: var(--color-blue-shade-25);
  /* derives from accent-shadow so it adapts per theme */
  --color-on-accent-subtle: var(--color-accent-shadow);
}