/* SYSTEM LAYER — colour roles. Verbatim from src/theme/sys-colors.css.
   These are the tokens designs should consume. */
:root {
  --accent-fill-i: var(--green-700);
  --accent-fill-ii: var(--yellow-600);
  --accent-fill-iii: var(--orange-500);
  --accent-fill-iv: var(--orange-100);
  --accent-fill-v: var(--magenta-600);
  --accent-fill-vi: var(--neutral-400);
  --accent-i: var(--brand-black);
  --accent-ii: var(--brand-indigo);
  --accent-iii: var(--brand-blue);
  --accent-iv: var(--brand-purple);
  --accent-text-i: var(--green-300);
  --accent-text-ii: var(--yellow-200);
  --accent-text-iii: var(--orange-950);
  --accent-text-iv: var(--orange-800);
  --accent-text-v: var(--magenta-050);
  --accent-text-vi: var(--neutral-800);
  --accent-v: var(--brand-pink);
  --accent-vi: var(--brand-orange);
  --action-border: var(--theme-interactive-primary);
  --action-brand-icon: var(--theme-interactive-secondary);
  --action-brand-text: var(--theme-interactive-secondary);
  --action-critical-border: var(--critical-default);
  --action-critical-emphasis-border: var(--critical-emphasis);
  --action-critical-emphasis-fill: var(--critical-emphasis);
  --action-critical-emphasis-icon: var(--critical-emphasis);
  --action-critical-emphasis-text: var(--critical-emphasis);
  --action-critical-fill: var(--critical-default);
  --action-critical-icon: var(--critical-default);
  --action-critical-outline: var(--critical-default);
  --action-critical-subtle-fill: var(--critical-subtle);
  --action-critical-text: var(--critical-default);
  --action-disabled-border: var(--neutral-600);
  --action-disabled-fill: var(--neutral-600);
  --action-disabled-icon: var(--neutral-600);
  --action-disabled-text: var(--neutral-600);
  --action-emphasis-border: var(--theme-interactive-primary-hover);
  --action-emphasis-fill: var(--theme-interactive-primary-hover);
  --action-emphasis-icon: var(--theme-interactive-primary-hover);
  --action-emphasis-outline: var(--theme-interactive-primary-hover);
  --action-emphasis-text: var(--theme-interactive-primary-hover);
  --action-fill: var(--theme-interactive-primary);
  --action-icon: var(--theme-interactive-primary);
  --action-inverse-border: var(--bg);
  --action-inverse-fill: var(--bg);
  --action-inverse-icon: var(--stone-900);
  --action-inverse-outline: var(--bg);
  --action-inverse-text: var(--stone-900);
  --action-outline: var(--theme-interactive-primary);
  --action-subtle-fill: var(--neutral-900);
  --action-text: var(--theme-interactive-primary);
  --bg: var(--white-white);
  --brand-black: var(--stone-050);
  --brand-blue: var(--blue-200);
  --brand-cyan: var(--cyan-600);
  --brand-green: var(--green-400);
  --brand-indigo: var(--indigo-100);
  --brand-orange: var(--orange-500);
  --brand-pink: var(--magenta-300);
  --brand-purple: var(--purple-300);
  --brand-white: var(--white-white);
  --brand-yellow: var(--yellow-500);
  --control-disabled-border: var(--stone-600);
  --control-disabled-focus-outline: var(--stone-600);
  --control-disabled-icon: var(--stone-600);
  --control-disabled-text: var(--stone-600);
  --control-fill: var(--bg);
  --control-focus-outline: var(--bg);
  --control-icon: var(--icon);
  --control-icon-accent-i: var(--cyan-400);
  --control-icon-brand-subtle: var(--icon-brand-subtle);
  --control-icon-subtle: var(--stone-200);
  --control-selected-border: var(--stone-050);
  --control-selected-hover-border: var(--stone-050);
  --control-selected-outline: var(--stone-050);
  --control-surface-subtle-fill: var(--neutral-900);
  --control-text: var(--text);
  --control-unselected-border: var(--stone-400);
  --control-unselected-focus-outline: var(--stone-100);
  --control-unselected-hover-border: var(--stone-200);
  --critical-default: var(--orange-200);
  --critical-emphasis: var(--orange-300);
  --critical-highlight: var(--orange-500);
  --critical-subtle: var(--orange-900);
  --divider: var(--neutral-700);
  --divider-brand: var(--purple-700);
  --feedback-brand: var(--theme-palette-brand-primary);
  --feedback-brand-subtle: var(--theme-palette-brand-secondary);
  --feedback-emphasis: var(--critical-emphasis);
  --feedback-success: var(--success-emphasis);
  --feedback-surface-emphasis: var(--neutral-700);
  --feedback-warning: var(--warning-emphasis);
  --gradient-i-stops-0: var(--brand-cyan);
  --gradient-i-stops-50: var(--brand-blue);
  --gradient-i-stops-100: var(--brand-purple);
  --gradient-ii-stops-0: var(--brand-blue);
  --gradient-ii-stops-50: var(--brand-purple);
  --gradient-ii-stops-100: var(--brand-pink);
  --gradient-iii-stops-0: var(--brand-purple);
  --gradient-iii-stops-50: var(--brand-pink);
  --gradient-iii-stops-100: var(--brand-orange);
  --icon: var(--stone-100);
  --icon-brand: var(--theme-palette-brand-primary);
  --icon-brand-subtle: var(--theme-palette-brand-secondary);
  --icon-inverse: var(--stone-900);
  --success-default: var(--green-300);
  --success-emphasis: var(--green-600);
  --success-highlight: var(--green-700);
  --success-subtle: var(--green-900);
  --surface: var(--white-white);
  --surface-accent-info: var(--blue-950);
  --surface-accent-brand: var(--purple-950);
  --surface-border: var(--neutral-800);
  --surface-brand-subtle: var(--theme-palette-brand-secondary);
  --surface-emphasis: var(--neutral-800);
  --surface-inverse: var(--neutral-050);
  --surface-muted: var(--neutral-950);
  --surface-muted-border: var(--neutral-800);
  --surface-subtle: var(--neutral-900);
  --text: var(--stone-100);
  --text-brand-subtle: var(--theme-palette-brand-secondary);
  --text-inverse: var(--stone-900);
  --text-inverse-muted: var(--neutral-600);
  --text-inverse-subtle: var(--stone-800);
  --text-muted: var(--neutral-400);
  --text-subtle: var(--stone-200);
  --warning-default: var(--yellow-400);
  --warning-emphasis: var(--yellow-500);
  --warning-highlight: var(--yellow-600);
  --warning-subtle: var(--yellow-900);

  --gradient-brand-i: linear-gradient(45deg, var(--gradient-i-stops-0) 0%, var(--gradient-i-stops-50) 50%, var(--gradient-i-stops-100) 100%);
  --gradient-brand-ii: linear-gradient(45deg, var(--gradient-ii-stops-0) 0%, var(--gradient-ii-stops-50) 50%, var(--gradient-ii-stops-100) 100%);
  --gradient-brand-iii: linear-gradient(45deg, var(--gradient-iii-stops-0) 0%, var(--gradient-iii-stops-50) 50%, var(--gradient-iii-stops-100) 100%);
  --hero-bg-prism: var(--gradient-brand-i);
  --focus-ring: 0 0 0 1px var(--bg), 0 0 0 3px var(--action-emphasis-outline), 0 0 6px 3px var(--blue-600);
}