:root {
  --white: #fff;
  --black: #000;
  --persian-green-200: #e7f9f3;
  --persian-green-700: #198571;
  --corn-flakes-200: #fdf7e2;
  --corn-flakes-700: #f2c00d;
  --coral-red-200: #ffe1e1;
  --coral-red-700: #ec0202;
  --jelly-bean-200: #e1effe;
  --jelly-bean-700: #0771ee;
  --magic-fushia-200: #feeceb;
  --magic-fushia-700: #f8443a;
  --magic-fushia-800: #df3d34;
  --mystery-black-200: #f6f6f6;
  --mystery-black-300: #e7e7e7;
  --mystery-black-400: #d1d1d1;
  --mystery-black-500: #888;
  --mystery-black-700: #4f4f4f;
  --mystery-black-900: #1e1e1e;

  --brand-navy-blue: #001c4d;
  --brand-deep-blue: #006a95;

  --foreground-primary: var(--mystery-black-900);
  --foreground-secondary: var(--mystery-black-700);
  --foreground-tertiary: var(--mystery-black-500);
  --foreground-inverse: var(--white);
  --foreground-link: var(--mystery-black-700);
  --foreground-link-hover: var(--mystery-black-900);
  --background-primary: var(--white);
  --background-secondary: var(--mystery-black-200);
  --background-tertiary: var(--mystery-black-300);
  --background-inverse: var(--brand-navy-blue);
  --border-primary: var(--mystery-black-400);
  --border-secondary: var(--mystery-black-300);
  --accent-primary: var(--magic-fushia-700);
  --accent-primary-hover: #eb6e67;
  --accent-primary-active: var(--magic-fushia-800);
  --accent-primary-disabled: var(--mystery-black-200);
  --accent-primary-foreground: var(--white);
  --accent-secondary: var(--white);
  --accent-secondary-foreground: var(--mystery-black-900);
  --accent-secondary-hover: var(--mystery-black-200);
  --accent-background-soft: var(--magic-fushia-200);
  --focus-ring: #0060cc;

  --danger: var(--coral-red-700);
  --danger-background: var(--coral-red-200);
  --success: var(--persian-green-700);
  --success-background: var(--persian-green-200);
  --warning: var(--corn-flakes-700);
  --warning-background: var(--corn-flakes-200);
  --info: var(--jelly-bean-700);
  --info-background: var(--jelly-bean-200);

  --shadow-level-1: 0 0 2px 0 rgba(5, 0, 35, 0.06), 0 1px 3px 0 rgba(5, 0, 35, 0.1);
  --shadow-level-2: 0 10px 15px rgba(5, 0, 35, 0.1), 0 0 6px rgba(5, 0, 35, 0.1);

  --font-heading: 'Host Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --heading-lg: 24px;
  --heading-md: 20px;
  --heading-sm: 16px;
  --text-md: 16px;
  --text-sm: 14px;
  --text-xs: 12px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-full: 9999px;

  --field-border: var(--mystery-black-400);
  --field-border-hover: var(--mystery-black-900);
  --field-placeholder: var(--mystery-black-700);
  --field-foreground: var(--mystery-black-900);
  --field-background: var(--white);
  --focus-ring-field: #ffc888;
}